Scene Patterns

Pattern Selection Principle

What kind of motion do I need?
├── Bouncy / elastic / organic feel?
│   └── spring-animation: spring() + SPRING presets
│       ├── Entrances → ScalePop, SpringEntrance, CharacterTrail, WordTrail
│       ├── Staggered reveals → SpringTrail, GridStagger
│       ├── Sequential → useSpringChain
│       ├── Enter + exit → useSpringEnterExit
│       ├── Counters with overshoot → SpringCounter
│       └── Scene transitions → SpringSlide, SpringCrossfade
├── Text splitting / SVG / complex timeline?
│   └── gsap-animation: useGSAPTimeline / useGSAPWithFonts
│       ├── Char/word/line splitting → SplitText
│       ├── SVG stroke drawing → DrawSVG
│       ├── SVG morphing → MorphSVG
│       ├── Decode effects → ScrambleText
│       └── Timeline with labels → gsap.timeline()
├── Simple linear / eased motion?
│   └── Remotion: interpolate()
│       ├── Linear fade/slide
│       ├── Typing effect (.slice())
│       └── Progress bars
└── Visual atmosphere?
    └── react-animation: Aurora, Silk, Particles, NoiseOverlay

Default rule: Start with spring(). Only escalate to GSAP when you need SplitText, DrawSVG, MorphSVG, or ScrambleText. Only use raw interpolate() for strictly linear motion.

Scene Purpose → Pattern Mapping

Text Scenes

Reveal & Transform Scenes

Interaction Scenes

Transition & Visual Scenes

Common Scene Recipes

Recipe: Hook Scene (SaaS Promo Scene 1) — Spring Version

Spring-driven two-phase entrance. Bouncy, organic feel.

import { spring, interpolate, useCurrentFrame, useVideoConfig } from 'remotion';
import { SPRING } from '../spring-presets';

// Phase 1: Two elements enter from sides with spring physics
const leftEntrance = spring({ frame, fps, config: SPRING.bouncy });
const rightEntrance = spring({ frame, fps, delay: 4, config: SPRING.bouncy });
const leftX = interpolate(leftEntrance, [0, 1], [-600, 0]);
const rightX = interpolate(rightEntrance, [0, 1], [600, 0]);

// Phase 2: First text exits, second springs in
const exitProgress = spring({ frame, fps, delay: 50, config: SPRING.stiff });
const newEntrance = spring({ frame, fps, delay: 55, config: SPRING.pop });
const exitOpacity = 1 - exitProgress;
const exitY = interpolate(exitProgress, [0, 1], [0, -40]);
const newY = interpolate(newEntrance, [0, 1], [40, 0]);

Recipe: Hook Scene — GSAP Version (when SplitText needed)

Use GSAP when you need char-level mask reveals that spring can't do.

// Phase 1: Two elements enter from sides (frames 0-50)
const entrance = spring({ frame, fps, config: { damping: 14, stiffness: 120 } });
const leftX = interpolate(entrance, [0, 1], [-600, 0]);
const leftRotateY = interpolate(entrance, [0, 1], [60, 0]);
const rightX = interpolate(entrance, [0, 1], [600, 0]);
const rightRotateY = interpolate(entrance, [0, 1], [-60, 0]);

// Phase 2: First text exits backward, second falls in (frames 50-90)
const exitProgress = frame >= 50 ? interpolate(frame, [50, 65], [0, 1], { extrapolateRight: 'clamp' }) : 0;
const exitRotateX = interpolate(exitProgress, [0, 1], [0, 90]);
const newEntrance = frame >= 55 ? spring({ frame: frame - 55, fps }) : 0;
const newRotateX = interpolate(newEntrance, [0, 1], [-90, 0]);

Recipe: Card Flip Scene (SaaS Promo Scene 2)

// Use gsap-animation CardFlip3D template
<CardFlip3D
  frontContent={<TerminalMockup lines={painPointLines} />}
  backContent={<UIPreview screenshot={productUI} />}
  flipDelay={1.5}
  flipDuration={1.2}
/>

Recipe: Comparison Scene (SaaS Promo Scene 4-5)

// Scene 4: Equal comparison
<SplitScreenComparison
  leftPanel={<OldWayContent />}
  rightPanel={<NewWayContent />}
  leftLabel="Before"
  rightLabel="After"
  centerElement="VS"
/>

// Scene 5: Winner highlight
<SplitScreenComparison
  leftPanel={<OldWayContent />}
  rightPanel={<NewWayContent />}
  dimLeft={true}
  hold={1.5}
/>

Recipe: Showcase Grid (SaaS Promo Scene 7) — Spring Version

Spring-animation GridStagger for feature showcase. Center-out pop-in.

import { SPRING } from '../spring-presets';

const ShowcaseGrid: React.FC<{ items: GridItem[] }> = ({ items }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const columns = 3;
  const centerCol = (columns - 1) / 2;
  const rows = Math.ceil(items.length / columns);
  const centerRow = (rows - 1) / 2;

  return (
    <AbsoluteFill style={{
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <div style={{ display: 'grid', gridTemplateColumns: `repeat(${columns}, 240px)`, gap: 24 }}>
        {items.map((item, i) => {
          const col = i % columns;
          const row = Math.floor(i / columns);
          const dist = Math.sqrt((col - centerCol) ** 2 + (row - centerRow) ** 2);
          const delay = Math.round(dist * 5);
          const scale = spring({ frame, fps, delay, config: SPRING.pop });
          const opacity = spring({ frame, fps, delay, config: SPRING.smooth });

          return (
            <div key={i} style={{
              transform: `scale(${scale})`,
              opacity,
              background: 'rgba(255,255,255,0.06)',
              borderRadius: 16, padding: 24, textAlign: 'center',
            }}>
              <GridCard {...item} />
            </div>
          );
        })}
      </div>
    </AbsoluteFill>
  );
};

Recipe: CTA with Click (SaaS Promo Scene 8)

// Combine Outro template with CursorClick
<AbsoluteFill>
  <Outro headline={brandName} tagline={slogan} />
  <Sequence from={Math.round(fps * 2)}>
    <CursorClick targetSelector=".cta-button" cursorDelay={0.3} clickDelay={0.8}>
      <CTAButton text="Start Creating →" />
    </CursorClick>
  </Sequence>
</AbsoluteFill>

UI Mockup Components

Commonly needed but not in animation skills — implement manually:

Browser Window: Dark frame with 3 dots (red/yellow/green), 36px toolbar, 24px border-radius, deep shadow. Content area renders children.

Terminal: Dark background (#1a1a2e), monospace font, green command text (#4ade80), gray comment text (#6b7280). Lines appear with staggered opacity.

Chat Interface: Left sidebar (gray), right content area. Chat bubbles with spring entrance. Typing indicator with 3 pulsing dots.

Mobile Frame: Rounded rectangle with notch, status bar. Content area renders children at mobile aspect ratio.