with one click
react-animation
// ReactBits animations for Remotion - curated for aesthetic excellence in video production
// ReactBits animations for Remotion - curated for aesthetic excellence in video production
Execute implementation tasks from design documents using markdown checkboxes. Use when (1) implementing features from feature-analyzer output, (2) resuming interrupted work, (3) batch executing tasks. Triggers on 'start implementation', 'run tasks', 'resume'.
AI-Native Issue-Driven development workflow. From GitHub Issue to merged PR: parse issue, explore codebase, design technical plan, execute with agent team, create PR, and cleanup. Use when a user wants to implement a GitHub Issue end-to-end: `/issue-flow #123` or `/issue-flow` to pick from open issues.
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.
Generate article cover images with 5 dimensions (type, palette, rendering, text, mood). Supports cinematic (2.35:1), widescreen (16:9), and square (1:1) aspects. Use when user asks to 'generate cover image', 'create article cover', or 'make cover'.
MiniMax TTS API - 文本转语音、声音克隆、声音设计
GSAP + Remotion integration for professional motion graphics video production. Timeline orchestration, text splitting, SVG morphing, advanced easing, and reusable effect presets.
| name | react-animation |
| description | ReactBits animations for Remotion - curated for aesthetic excellence in video production |
| metadata | {"tags":"react-animation, reactbits, remotion, animation, video, effects, text, backgrounds, motion-graphics"} |
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 |