메뉴
ReactBits animations for Remotion - curated for aesthetic excellence in video production
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/notedit/happy-skills --skill react-animation명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SOC 직업 분류 기준
SKILL.md 표시 중
| 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 |