ReactBits animations for Remotion - curated for aesthetic excellence in video production
Use this skill when creating Remotion video compositions that need aesthetically refined visual effects. Components are curated for motion graphics excellence, categorized by visual style.
npx shadcn@latest add https://reactbits.dev/r/<Component>-TS-CSS
Components organized by visual style. Avoid mixing more than 2 styles in one video.
Smooth, cinematic, refined. Best for luxury brands, emotional storytelling.
| Component |
|---|
| Install |
|---|
| Aesthetic |
|---|
| BlurText | npx shadcn add https://reactbits.dev/r/BlurText-TS-CSS | Blur-to-clear cinematic reveal |
| Component | Install | Aesthetic |
|---|---|---|
| Aurora | npx shadcn add https://reactbits.dev/r/Aurora-TS-CSS | Flowing northern lights |
| Silk | npx shadcn add https://reactbits.dev/r/Silk-TS-CSS | Minimalist fabric waves |
| Grainient | npx shadcn add https://reactbits.dev/r/Grainient-TS-CSS | Grainy artistic gradients |
| Component | Install | Aesthetic |
|---|---|---|
| Ribbons | npx shadcn add https://reactbits.dev/r/Ribbons-TS-CSS | Flowing silk ribbons |
| ShapeBlur | npx shadcn add https://reactbits.dev/r/ShapeBlur-TS-CSS | Soft abstract geometry |
Usage Pattern:
const ElegantScene: React.FC = () => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
return (
<AbsoluteFill>
<Aurora time={frame / fps} colorStops={['#3A29FF', '#FF94B4', '#FF3232']} />
<BlurText text="Elegant Title" startFrame={15} />
</AbsoluteFill>
);
};
Cutting-edge, dynamic, futuristic. Best for tech products, startups, innovation.
| Component | Install | Aesthetic |
|---|---|---|
| GlitchText | npx shadcn add https://reactbits.dev/r/GlitchText-TS-CSS | Digital glitch artifacts |
| GradientText | npx shadcn add https://reactbits.dev/r/GradientText-TS-CSS | Flowing gradient sweep |
| Component | Install | Aesthetic | Disable Mouse |
|---|---|---|---|
| Iridescence | npx shadcn add https://reactbits.dev/r/Iridescence-TS-CSS | Rainbow oil-slick | mouseReact={false} |
| LiquidChrome | npx shadcn add https://reactbits.dev/r/LiquidChrome-TS-CSS | Liquid metal surface | interactive={false} |
| Particles | npx shadcn add https://reactbits.dev/r/Particles-TS-CSS | Floating data points | moveParticlesOnHover={false} |
| Component | Install | Aesthetic |
|---|---|---|
| MetaBalls | npx shadcn add https://reactbits.dev/r/MetaBalls-TS-CSS | Organic liquid fusion |
| Antigravity | npx shadcn add https://reactbits.dev/r/Antigravity-TS-CSS | Ethereal particle field |
Usage Pattern:
const TechScene: React.FC = () => (
<AbsoluteFill style={{ background: '#000' }}>
<Iridescence mouseReact={false} color={[0.3, 0.1, 0.8]} speed={1} />
<GlitchText speed={0.5} enableShadows enableOnHover={false}>
FUTURE IS NOW
</GlitchText>
</AbsoluteFill>
);
Metallic, refined, sophisticated. Best for luxury goods, finance, high-end services.
| Component | Install | Aesthetic |
|---|---|---|
| ShinyText | npx shadcn add https://reactbits.dev/r/ShinyText-TS-CSS | Metallic sheen sweep |
| Component | Install | Aesthetic |
|---|---|---|
| Silk | npx shadcn add https://reactbits.dev/r/Silk-TS-CSS | Premium fabric texture |
| Component | Install | Aesthetic |
|---|---|---|
| StarBorder | npx shadcn add https://reactbits.dev/r/StarBorder-TS-CSS | Animated gradient border |
Usage Pattern:
const LuxuryScene: React.FC = () => (
<AbsoluteFill style={{ background: '#0a0a0a' }}>
<Silk speed={0.5} color="#1a1a2e" />
<StarBorder color="#gold" speed="4s">
<ShinyText text="PREMIUM" color="#c9b037" shineColor="#fff" />
</StarBorder>
</AbsoluteFill>
);
Nostalgic, digital, lo-fi. Best for gaming, retro tech, vaporwave aesthetics.
| Component | Install | Aesthetic |
|---|---|---|
| TextType | npx shadcn add https://reactbits.dev/r/TextType-TS-CSS | Terminal typewriter |
| DecryptedText | npx shadcn add https://reactbits.dev/r/DecryptedText-TS-CSS | Data decryption effect |
| Component | Install | Aesthetic |
|---|---|---|
| PixelTransition | npx shadcn add https://reactbits.dev/r/PixelTransition-TS-CSS | Pixel grid dissolve |
| Component | Install | Aesthetic |
|---|---|---|
| LetterGlitch | npx shadcn add https://reactbits.dev/r/LetterGlitch-TS-CSS | Matrix code rain |
| Dither | npx shadcn add https://reactbits.dev/r/Dither-TS-CSS | Retro dithering |
| FaultyTerminal | npx shadcn add https://reactbits.dev/r/FaultyTerminal-TS-CSS | CRT monitor effect |
Usage Pattern:
const RetroScene: React.FC = () => (
<AbsoluteFill style={{ background: '#000' }}>
<LetterGlitch glitchSpeed={100} glitchColors={['#0f0', '#00ff41']} />
<GlitchText>SYSTEM OVERRIDE</GlitchText>
</AbsoluteFill>
);
High-impact, dynamic, powerful. Best for action, sports, announcements.
| Component | Install | Aesthetic | Disable Mouse |
|---|---|---|---|
| Lightning | npx shadcn add https://reactbits.dev/r/Lightning-TS-CSS | Electric storm | None |
| Beams | npx shadcn add https://reactbits.dev/r/Beams-TS-CSS | Volumetric light columns | None |
| LightRays | npx shadcn add https://reactbits.dev/r/LightRays-TS-CSS | God rays, dramatic | followMouse={false} |
Usage Pattern:
const DramaticScene: React.FC = () => (
<AbsoluteFill>
<Lightning hue={45} intensity={0.8} speed={2} />
<BlurText text="THUNDER STRIKE" />
</AbsoluteFill>
);
Experimental, artistic, unique. Best for creative projects, music videos.
| Component | Install | Aesthetic |
|---|---|---|
| DecryptedText | npx shadcn add https://reactbits.dev/r/DecryptedText-TS-CSS | Cryptic reveal |
| Component | Install | Aesthetic | Disable Mouse |
|---|---|---|---|
| Plasma | npx shadcn add https://reactbits.dev/r/Plasma-TS-CSS | Organic flowing colors | mouseInteractive={false} |
| Prism | npx shadcn add https://reactbits.dev/r/Prism-TS-CSS | Light refraction | animationType='rotate' |
Enhance any scene.
| Component | Install | Purpose |
|---|---|---|
| Noise | npx shadcn add https://reactbits.dev/r/Noise-TS-CSS | Film grain texture overlay |
Usage Pattern:
const SceneWithGrain: React.FC = () => {
const frame = useCurrentFrame();
const { width, height } = useVideoConfig();
const canvasRef = useRef<HTMLCanvasElement>(null);
useEffect(() => {
const ctx = canvasRef.current?.getContext('2d');
if (!ctx || frame % 2 !== 0) return;
const imageData = ctx.createImageData(width, height);
for (let i = 0; i < imageData.data.length; i += 4) {
const seed = frame * 100000 + i / 4;
const val = Math.floor((Math.sin(seed) * 10000 % 1) * 255);
imageData.data[i] = imageData.data[i + 1] = imageData.data[i + 2] = val;
imageData.data[i + 3] = 15;
}
ctx.putImageData(imageData, 0, 0);
}, [frame]);
return (
<>
<YourScene />
<canvas ref={canvasRef} style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }} />
</>
);
};
Replace all time-driven animations with useCurrentFrame():
import { useCurrentFrame, useVideoConfig, interpolate, Easing } from 'remotion';
// Before: time accumulation
// After: deterministic from frame
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const progress = interpolate(frame, [0, 30], [0, 1], {
easing: Easing.out(Easing.cubic),
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
});
Ensure deterministic rendering:
function seededRandom(seed: number): number {
const x = Math.sin(seed) * 10000;
return x - Math.floor(x);
}
const rand = seededRandom(frame * 1000 + index);
For WebGL/OGL components:
// Time uniform
uniforms.iTime.value = frame / fps;
// Scripted mouse path (optional)
uniforms.iMouse.value.set(
0.5 + 0.3 * Math.sin(frame / fps),
0.5 + 0.2 * Math.cos(frame / fps * 0.7)
);
DO:
DON'T:
BlurText, GlitchText, GradientText, ShinyText, DecryptedText, TextType
Aurora, Silk, Grainient, Lightning, Iridescence, LiquidChrome, Particles, Galaxy, Plasma, LetterGlitch, Beams, LightRays, Dither, FaultyTerminal, DarkVeil, PixelSnow, Balatro, Prism
MetaBalls, Ribbons, ShapeBlur, Antigravity, StarBorder, PixelTransition
Noise
Why these were removed:
| Project Type | Text | Background | Effect | Mood |
|---|---|---|---|---|
| Luxury Brand | ShinyText | Silk | StarBorder | Premium |
| Tech Startup | GradientText | Iridescence | - | Innovative |
| Creative Studio | BlurText | Aurora | Ribbons | Artistic |
| Gaming | GlitchText | LetterGlitch | PixelTransition | Edgy |
| Documentary | BlurText | Grainient | Noise | Cinematic |
| Event Promo | DecryptedText | Lightning | - | Energetic |