react-animation

Q: How do I install react-animation?

Run npx skills add https://github.com/notedit/happy-skills --skill react-animation in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/react-animation/ (personal) or .claude/skills/react-animation/ (project).

by noteditFrontend & Design

ReactBits animations for Remotion - curated for aesthetic excellence in video production

Installs: 180
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/notedit/happy-skills --skill react-animation

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads react-animation automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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

FAQ

What does the react-animation skill do?

ReactBits animations for Remotion - curated for aesthetic excellence in video production

How do I install react-animation?

Run npx skills add https://github.com/notedit/happy-skills --skill react-animation in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/react-animation/ (personal) or .claude/skills/react-animation/ (project).

Which AI agents can use react-animation?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is react-animation safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains react-animation?

It is published by notedit in notedit/happy-skills. It has 180 recorded installs.

More from notedit/happy-skills

View all →

feature-dev

notedit/happy-skills

Guided feature development with codebase understanding and architecture focus. Use for implementing features systematically: explore → clarify → design → implement → test → review.

Code Quality & Workflow538 installs

gsap-animation

notedit/happy-skills

GSAP + Remotion integration for professional motion graphics video production. Timeline orchestration, text splitting, SVG morphing, advanced easing, and reusable effect presets.

Frontend & Design314 installs

screenshot-analyzer

notedit/happy-skills

Analyze product screenshots to extract feature lists and generate development task checklists. Use when: (1) Analyzing competitor product screenshots for feature extraction, (2) Generating PRD/task lists from UI designs, (3) Batch analyzing multiple app screens, (4) Conducting competitive analysis from visual references.

Productivity & Automation201 installs

video-producer

notedit/happy-skills

End-to-end Remotion video production from natural language briefs. Orchestrates narrative structure, scene animation, visual style, and rendering to produce complete promotional videos. Use when a user wants to create a complete video (product promo, typographic piece, social media animation) — not just individual animation effects. Coordinates gsap-animation, spring-animation, and react-animation skills as building blocks.

Media & Creative149 installs

feature-analyzer

notedit/happy-skills

Turn ideas into fully formed designs and specs through natural collaborative dialogue. Use when planning new features, designing architecture, or making significant changes to the codebase.

Code Quality & Workflow104 installs

tts-skill

notedit/happy-skills

Open the skill to read its SKILL.md instructions.

Media & Creative97 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs

react-animation

Install

Install

Describe the task

Review the result

SKILL.md

When to use

Installation

🎨 Aesthetic Categories

1. Elegant & Soft (优雅柔和)

Text

Backgrounds

Effects

2. Modern & Tech (现代科技)

Text

Backgrounds

Effects

3. Luxury & Premium (奢华高端)

Text

Backgrounds

Effects

4. Retro & Pixel (复古像素)

Text

Transitions

Backgrounds

5. Energy & Dramatic (能量戏剧)

Backgrounds

6. Abstract & Artistic (抽象艺术)

Text

Backgrounds

7. Utility (通用工具)

Overlay

🔧 Core Adaptation Patterns

Frame-Based Animation

Seeded Randomness

Shader Uniforms

⚠️ Style Consistency Guidelines

📦 Full Component List (35 curated)

Text (6)

Backgrounds (18)

Effects (10)

Utility (1)

❌ Removed Components

🎬 Recommended Combinations

FAQ

More from notedit/happy-skills

Popular frontend & design skills