import React, { useMemo } from 'react'; import { AbsoluteFill, useVideoConfig, Sequence, random } from 'remotion'; import { AnimatedText, AnimatedCounter, TypeWriter, CodeBlock, StaggeredMotion, Particles, Spawner, Behavior, useViewportRect, Scene3D, Step, Element3D, interpolate as interpolateUtil, Transform3D, Vector3, StepResponsive, } from 'remotion-bits'; export const metadata = { name: "RemotionBits", description: "Promotional showcase for the RemotionBits library.", tags: ["showcase", "promo", "library"], duration: 1140, width: 1920, height: 1080, registry: { name: "bit-remotion-bits-promo", title: "RemotionBits", description: "A promotional showcase highlighting RemotionBits library capabilities.", type: "bit" as const, add: "when-needed" as const, registryDependencies: ["animated-text", "gradient-transition", "staggered-motion", "particle-system", "scene-3d", "use-viewport-rect"], dependencies: [], files: [ { path: "docs/src/bits/examples/showcase/FeatureShowcase.tsx", }, ], }, }; export const Component: React.FC = () => { const rect = useViewportRect(); const { vmin } = rect; const revealDuration = 20; const fontSize = vmin * 10; const positions = useMemo(() => { const base = Transform3D.identity(); const initialIconBase = base.translate(-vmin * 40, -vmin * 1, 0); const elementsBase = base.translate(0, -vmin * 120, 0).rotateX(15); const elementsIconBase = elementsBase.translate(0, 0, 0).scaleBy(2.0).rotateZ(-240); const transitionsBase = base.translate(vmin * 200, vmin * 50, 0).rotateY(-15); const transitionsIconBase = transitionsBase.translate(0, vmin * -20, 0).scaleBy(2.0); const scenesBase = base.translate(-vmin * 120, vmin * 70, 0).rotateY(15); const scenesIconBase = scenesBase.scaleBy(2.0); const sceneItems = { hero: base.translate(vmin * 28, vmin * -5, vmin * 5).rotateY(-10), dash: base.translate(vmin * -80, vmin * -30, 0).rotateY(5), notif: base.translate(vmin * -70, vmin * 0, vmin * 10), code: base.translate(vmin * 50, vmin * -30), player: base.translate(vmin * -17, vmin * 18), }; const triangleOffset = new Vector3(0, -vmin * 2, 0); const squareOffset = new Vector3(-vmin * 2, vmin * 2, 0); const circleOffset = new Vector3(vmin * 2, vmin * 2, 0); const titleTransforms = { baseShift: base.translate(vmin * 7, 0, 0), elementsShift: elementsBase.translate(vmin * 7, 0, 0), transitionsShift: transitionsBase.translate(vmin * 23, 0, 0), scenesShift: scenesBase.translate(vmin * 23, 0, 0), }; const titleTransformsUp = { elementsShift: titleTransforms.elementsShift.translate(0, -vmin * 10, 0), transitionsShift: titleTransforms.transitionsShift.translate(0, -vmin * 10, 0), scenesShift: titleTransforms.scenesShift.translate(0, -vmin * 10, 0), }; const iconTransforms = { triangle: { introFrom: initialIconBase.translate(triangleOffset.clone().multiplyScalar(4.0)), introTo: initialIconBase.translate(triangleOffset), elementsUp: elementsIconBase.translate(0, -vmin * 10, 0), }, square: { introFrom: initialIconBase.translate(squareOffset.clone().multiplyScalar(4)), introTo: initialIconBase.translate(squareOffset), scenesUp: scenesIconBase.translate(0, -vmin * 10, 0).rotateZ(180), }, circle: { introFrom: initialIconBase.translate(circleOffset.clone().multiplyScalar(4)), introTo: initialIconBase.translate(circleOffset), transitionsUp: transitionsIconBase.translate(0, -vmin * 10, 0), }, }; const cardW = vmin * 70; const cardH = vmin * 40; // Row 1 const elementsParticles = elementsBase.translate(-cardW, -cardH, 0).rotateY(15).rotateX(10); const elementsAnimatedText = elementsBase.translate(0, -cardH - vmin * 10, vmin * 10).rotateX(10); const elementsCounter = elementsBase.translate(cardW, -cardH, 0).rotateY(-15).rotateX(10); // Row 2 const elementsTypeWriter = elementsBase.translate(-cardW, 0, vmin * 5).rotateY(15); const elementsCodeBlock = elementsBase.translate(0, 0, vmin * 10); const elementsGlitchCycle = elementsBase.translate(cardW, 0, vmin * 5).rotateY(-15); // Row 3 const elementsSlideIn = elementsBase.translate(-cardW, cardH, 0).rotateY(15).rotateX(-10); const elementsCarousel = elementsBase.translate(0, cardH + vmin * 10, vmin * 10).rotateX(-10); const elementsTypewriterRewrite = elementsBase.translate(cardW, cardH, 0).rotateY(-15).rotateX(-10); return { base, offsets: { triangle: triangleOffset, square: squareOffset, circle: circleOffset, }, intro: { title: [base, titleTransforms.baseShift], icons: { triangle: [ initialIconBase.clone().rotateZ(0), initialIconBase.clone().rotateZ(180), initialIconBase.clone().translate(triangleOffset.multiplyScalar(2.5)) ], square: [ initialIconBase.clone().rotateZ(0), initialIconBase.clone().rotateZ(180), initialIconBase.clone().translate(squareOffset.multiplyScalar(2.5)) ], circle: [ initialIconBase.clone(), initialIconBase.clone().rotateX(180), initialIconBase.clone().translate(circleOffset.multiplyScalar(2.5)) ], }, }, elements: { base: elementsBase, iconBase: elementsIconBase, items: { particles: elementsParticles, animatedText: elementsAnimatedText, counter: elementsCounter, typeWriter: elementsTypeWriter, codeBlock: elementsCodeBlock, glitchCycle: elementsGlitchCycle, slideIn: elementsSlideIn, carousel: elementsCarousel, typewriterRewrite: elementsTypewriterRewrite, }, title: { intro: [elementsBase.translate(0, vmin * 10, 0)], elements: [elementsBase.translate(0, vmin * 10, 0)], transitions: [elementsBase.translate(0, vmin * 10, 0)], }, icons: { triangle: { elements: elementsIconBase.translate(0, vmin * -7, 0), }, }, }, transitions: { base: transitionsBase, iconBase: transitionsIconBase, title: { intro: [transitionsBase], elements: [transitionsBase], transitions: [ transitionsBase, ], scenes: [titleTransformsUp.transitionsShift, transitionsBase], }, }, scenes: { base: scenesBase, iconBase: scenesIconBase, items: { hero: [ sceneItems.hero.translate(0, vmin * 20, 0), sceneItems.hero, ], dash: [ sceneItems.dash.translate(0, vmin * 15, 0), sceneItems.dash, ], notif: [ sceneItems.notif.scaleBy(0).translate(0, vmin * 10, 0), sceneItems.notif, ], code: [ sceneItems.code.translate(0, vmin * 15, 0), sceneItems.code, ], player: [sceneItems.player], }, title: { intro: [scenesBase], transitions: [scenesBase], scenes: [ scenesBase.translate(0, vmin * 5.0, 0), ], outro: [ titleTransformsUp.scenesShift, scenesBase ], }, icons: { square: { scenes: [scenesIconBase, iconTransforms.square.scenesUp], }, }, }, outro: { title: [ titleTransforms.baseShift, titleTransforms.baseShift, titleTransforms.baseShift, titleTransforms.baseShift, base ], icons: { triangle: [ initialIconBase.clone().translate(triangleOffset.clone()), initialIconBase.clone().rotateZ(180), initialIconBase.clone().rotateZ(0), ], square: [ initialIconBase.clone().translate(squareOffset.clone()), initialIconBase.clone().rotateZ(180), initialIconBase.clone().rotateZ(0), ], circle: [ initialIconBase.clone().translate(circleOffset.clone()), initialIconBase.clone().rotateX(180), initialIconBase.clone().rotateX(0), ], }, }, }; }, [rect.width, rect.height]); const ShapeIcon = ({ size, variant, style, className, }: { size: number; variant: 'triangle' | 'square' | 'circle'; style?: React.CSSProperties; className?: string; }) => { return ( ); }; const FloatingCard = ({ children }: { children: React.ReactNode }) => (

{children}

); const mapElementSteps = (props: any) => ({ 'elements': props, 'element-particles': props, 'element-animated-text': props, 'element-counter': props, 'element-type-writer': props, 'element-code-block': props, 'element-glitch-cycle': props, 'element-slide-in': props, 'element-carousel': props, 'element-typewriter-rewrite': props, }); const gridData = useMemo(() => { const items = []; const rows = 10; const cols = 25; const size = 10 * vmin; const gap = 1 * vmin; const totalW = cols * size + (cols - 1) * gap; const totalH = rows * size + (rows - 1) * gap; const palette = [ '#fb4934', '#b8bb26', '#fabd2f', '#83a598', '#d3869b', '#8ec07c', '#fe8019', '#d5c4a1' ]; const gradients = [ 'linear-gradient(to right, #100f0f55, transparent)', 'linear-gradient(to left, #100f0f55, transparent)', 'linear-gradient(to bottom, #100f0f55, transparent)', 'linear-gradient(to top, #100f0f55, transparent)', 'radial-gradient(circle at 50% 50%, #100f0f33, transparent)', ] const getVariants = () => [ () => ({ scale: [0, 1] }), () => ({ x: [size, 0] }), () => ({ x: [-size, 0] }), () => ({ y: [size, 0] }), () => ({ y: [-size, 0] }), () => ({ rotate: [90, 0] }), () => ({ rotate: [-90, 0] }), () => ({ blur: [0, 0] }), () => ({ borderRadius: [size / 2, 4] }), () => ({ duration: 30 }), ]; for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { // Procedural generation const seed = `grid-${r}-${c}`; // Wave from center const cx = (cols - 1) / 2; const cy = (rows - 1) / 2; const dist = Math.sqrt(Math.pow(r - cy, 2) + Math.pow(c - cx, 2)); const delayBase = 30 + dist * 2; const duration = 40; const transitionProps: any = { opacity: [0, 1], duration, delay: delayBase, easing: 'easeOutCubic', borderRadius: 4, }; const count = Math.floor(random(seed + 'count') * 4) + 2; // 2 to 5 const variants = getVariants(); for (let i = 0; i < count; i++) { const pick = Math.floor(random(seed + 'pick' + i) * variants.length); Object.assign(transitionProps, variants[pick]()); } const colorIndex = Math.floor(random(seed + 'color') * palette.length); const gradientIndex = Math.floor(random(seed + 'gradient') * gradients.length); const baseStyle: React.CSSProperties = { width: size, height: size, background: `${gradients[gradientIndex]}, ${palette[colorIndex]}`, borderRadius: 0, }; items.push(

); } } return { items, width: totalW, height: totalH }; }, [vmin]); return (

Particles Text Effects

Counter

" } typeSpeed={2} deleteSpeed={1} pauseAfterType={60} delay={330} cursor="▋" style={{ fontSize: vmin * 1.7, lineHeight: 1.25, whiteSpace: 'pre', opacity: 0.9, }} />

\n Remotion Bits\n" } language="tsx" showLineNumbers={false} fontSize={vmin * 1.15} padding={vmin * 1.2} transition={{ duration: revealDuration, delay: 20, lineStagger: 2, opacity: [0, 1], y: [8, 0], blur: [10, 0], }} />

Top Right Bottom Left

{gridData.items}

{/* Scene 1: Marketing Hero (Top Right) */}

NEW ARRIVAL

SUMMER VIBES

{/* Scene 2: Dashboard/Data (Top Left) */}

Revenue

This Week

{/* Scene 3: Notification (Bottom Left) */}

Render Complete

video_final_v2.mp4

{/* Scene 4: Code Editor (Bottom Right) */}

const Video = () ={'>'} {'{'}

return (

);

{'}'};

{/* Scene 5: Player (Left) */}

{/* Play button */}

{/* Progress bar */}

{/* --- TITLES --- */}

Remotion Bits

Elements

Transitions

Scenes

{/* --- ICONS --- */} ); };

RemotionBits

Install