Lava Lamp background animation

Description

A reusable animated component that's generating a number of circles, position them randomly on the screen. Using the BlurView to blur the circles to create the "lava" lamp effect and React Native Reanimated to animate the circles over a period of time in a loop, with the help of `withTiming`, `withSequence` and `withRepeat`. Props: `count` - number of circles `hue` - controls the hue of the generated color `intensity` - blur intensity `duration` - animation duration `colors` - define your own custom colors (`hue` and `count` will not be used anymore)

Installation

bunx @animatereactnative/cli@latest add lava-lamp-background-animation

npx @animatereactnative/cli@latest add lava-lamp-background-animation

yarn @animatereactnative/cli@latest add lava-lamp-background-animation

pnpm dlx @animatereactnative/cli@latest add lava-lamp-background-animation

Preview

Dependencies

PackageVersion
@faker-js/faker^9.2.0
expo-blur~15.0.7
randomcolor^0.6.2
react-native-reanimated~4.1.0

To install these dependencies, you can use the following command:

bun add @faker-js/faker@"^9.2.0" expo-blur@"~15.0.7" randomcolor@"^0.6.2" react-native-reanimated@"~4.1.0"

npm install @faker-js/faker@"^9.2.0" expo-blur@"~15.0.7" randomcolor@"^0.6.2" react-native-reanimated@"~4.1.0"

yarn install @faker-js/faker@"^9.2.0" expo-blur@"~15.0.7" randomcolor@"^0.6.2" react-native-reanimated@"~4.1.0"

pnpm install @faker-js/faker@"^9.2.0" expo-blur@"~15.0.7" randomcolor@"^0.6.2" react-native-reanimated@"~4.1.0"

Source code