Skills
skills/notedit/happy-skills/react-animation

react-animation

SKILL.md

When to use

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.

Installation

npx shadcn@latest add https://reactbits.dev/r/<Component>-TS-CSS

🎨 Aesthetic Categories

Components organized by visual style. Avoid mixing more than 2 styles in one video.

1. Elegant & Soft (δΌ˜ι›…ζŸ”ε’Œ)

Smooth, cinematic, refined. Best for luxury brands, emotional storytelling.

Text

Component Install Aesthetic
BlurText npx shadcn add https://reactbits.dev/r/BlurText-TS-CSS Blur-to-clear cinematic reveal

Backgrounds

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

Effects

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>
  );
};

2. Modern & Tech (ηŽ°δ»£η§‘ζŠ€)

Cutting-edge, dynamic, futuristic. Best for tech products, startups, innovation.

Text

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

Backgrounds

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}

Effects

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>
);

3. Luxury & Premium (ε₯’华高端)

Metallic, refined, sophisticated. Best for luxury goods, finance, high-end services.

Text

Component Install Aesthetic
ShinyText npx shadcn add https://reactbits.dev/r/ShinyText-TS-CSS Metallic sheen sweep

Backgrounds

Component Install Aesthetic
Silk npx shadcn add https://reactbits.dev/r/Silk-TS-CSS Premium fabric texture

Effects

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>
);

4. Retro & Pixel (倍叀像素)

Nostalgic, digital, lo-fi. Best for gaming, retro tech, vaporwave aesthetics.

Text

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

Transitions

Component Install Aesthetic
PixelTransition npx shadcn add https://reactbits.dev/r/PixelTransition-TS-CSS Pixel grid dissolve

Backgrounds

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>
);

5. Energy & Dramatic (θƒ½ι‡ζˆε‰§)

High-impact, dynamic, powerful. Best for action, sports, announcements.

Backgrounds

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>
);

6. Abstract & Artistic (ζŠ½θ±‘θ‰Ίζœ―)

Experimental, artistic, unique. Best for creative projects, music videos.

Text

Component Install Aesthetic
DecryptedText npx shadcn add https://reactbits.dev/r/DecryptedText-TS-CSS Cryptic reveal

Backgrounds

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'

7. Utility (ι€šη”¨ε·₯ε…·)

Enhance any scene.

Overlay

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' }} />
    </>
  );
};

πŸ”§ Core Adaptation Patterns

Frame-Based Animation

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',
});

Seeded Randomness

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);

Shader Uniforms

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)
);

⚠️ Style Consistency Guidelines

DO:

  • βœ… Mix Elegant + Luxury styles (BlurText + ShinyText + Silk)
  • βœ… Mix Modern + Retro styles (GlitchText + LetterGlitch)
  • βœ… Use Noise overlay on ANY scene
  • βœ… Keep backgrounds subtle when text is prominent

DON'T:

  • ❌ Mix Elegant + Retro (BlurText + PixelTransition)
  • ❌ Mix Luxury + Glitch (ShinyText + GlitchText)
  • ❌ Use Lightning with complex text animations
  • ❌ Use more than 2 background effects simultaneously

πŸ“¦ Full Component List (35 curated)

Text (6)

BlurText, GlitchText, GradientText, ShinyText, DecryptedText, TextType

Backgrounds (18)

Aurora, Silk, Grainient, Lightning, Iridescence, LiquidChrome, Particles, Galaxy, Plasma, LetterGlitch, Beams, LightRays, Dither, FaultyTerminal, DarkVeil, PixelSnow, Balatro, Prism

Effects (10)

MetaBalls, Ribbons, ShapeBlur, Antigravity, StarBorder, PixelTransition

Utility (1)

Noise

❌ Removed Components

Why these were removed:

  • Low aesthetic value: SplitText, FadeContent, AnimatedContent
  • Style overlap: ElectricBorder (covered by GlitchText), Orb (covered by Iridescence)
  • Outdated aesthetics: Hyperspeed, Cubes, Squares
  • Narrow use cases: CircularText, RotatingText, TrueFocus
  • Functional > Aesthetic: Counter, Stepper, Carousel (UI components)

🎬 Recommended Combinations

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
Weekly Installs
47
Repository
notedit/happy-skills
GitHub Stars
322
First Seen
Feb 12, 2026
Security Audits
Gen Agent Trust HubPass
SocketPass
SnykPass
Installed on
opencode47
gemini-cli46
codex46
kimi-cli46
cursor45
github-copilot45