> ## Documentation Index
> Fetch the complete documentation index at: https://docs.reframe-video.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Gallery

> A reel of reframe scenes — each a few-line declaration, each a deterministic render.

Every clip below is a scene in [`examples/scenes/`](https://github.com/kiyeonjeon21/reframe/tree/main/examples/scenes). Render any of them yourself with `npx reframe-video render examples/scenes/<name>.ts`. The full list — 68 scenes by category — is on the [Examples](/examples) page.

<Note>
  These gifs are the curated showcase. New renders accumulate here via `pnpm gallery` (the committed home, vs the gitignored `out/` scratch).
</Note>

## Generative choreography at scale

The kind of scene that is hand-rolled timeline math elsewhere is \~100 lines here, because the host language *generates* the nodes and phase-shifted behaviors — and the output is still data: every dot, glyph, and moon keeps a stable id.

<Frame caption="bloom.ts — 300 dots on a golden-angle spiral: radial bloom, traveling breath wave, chromatic ripple, vortex collapse">
  <img src="https://mintcdn.com/reframe/DfIQoqygbHNJJ3mE/assets/bloom.gif?s=f3323adf1960fa0fd14c0874724a407f" alt="Bloom" width="560" height="315" data-path="assets/bloom.gif" />
</Frame>

<Frame caption="wavefield.ts — physical interference: 1,152 phase-shifted oscillators on a 32×18 grid, a second ripple source joins mid-scene">
  <img src="https://mintcdn.com/reframe/DfIQoqygbHNJJ3mE/assets/wavefield.gif?s=d45ec2bf89f6df170a62643ea5f8726b" alt="Wavefield" width="420" height="236" data-path="assets/wavefield.gif" />
</Frame>

<Frame caption="orbit.ts — nested transform composition: moons orbit planets orbit a sun, the whole system tilts — three nested groups, three linear tweens">
  <img src="https://mintcdn.com/reframe/DfIQoqygbHNJJ3mE/assets/orbit.gif?s=57a57eea1e11a36c1d5d58629df6c2e5" alt="Orbit" width="480" height="270" data-path="assets/orbit.gif" />
</Frame>

## Kinetic typography

<Frame caption="typewave.ts — character-level kinetic type: cascade in, ride a standing wave, shatter with spin, a second phrase assembling from the debris">
  <img src="https://mintcdn.com/reframe/DfIQoqygbHNJJ3mE/assets/typewave.gif?s=7f99638350cfb31b7794f38a13a1520f" alt="Typewave" width="480" height="270" data-path="assets/typewave.gif" />
</Frame>

<Frame caption="glyph-reveal.ts — the archival stop-motion format: AI-generated plates as image nodes, ~7fps hard cuts, push-in, camera shake, a tick per cut">
  <img src="https://mintcdn.com/reframe/DfIQoqygbHNJJ3mE/assets/glyph-reveal.gif?s=8cd4aa28743eea8501c31c0ab7abc7af" alt="Glyph reveal" width="380" height="475" data-path="assets/glyph-reveal.gif" />
</Frame>

## Devices & media

<Frame caption="device-gallery.ts — the parametric device frames: premium glass + neon styles, seeded per-instance variation, one call each">
  <img src="https://mintcdn.com/reframe/DfIQoqygbHNJJ3mE/assets/gallery/device-gallery.gif?s=18a58a1848d8b5eeac371555e8855ff4" alt="Device gallery" width="640" height="360" data-path="assets/gallery/device-gallery.gif" />
</Frame>

<Frame caption="media-story.ts — images + a video clip assembled into a montage with a kinetic title and a lower-third, deterministic, retime-survivable">
  <img src="https://mintcdn.com/reframe/DfIQoqygbHNJJ3mE/assets/gallery/media-story.gif?s=7aa9f62f9ea7760694699136a33b016d" alt="Media story" width="460" height="259" data-path="assets/gallery/media-story.gif" />
</Frame>

## Effects & compositing

<Frame caption="group-fx-demo.ts — group blur / shadow / blend applied to a whole subtree as one offscreen composite">
  <img src="https://mintcdn.com/reframe/DfIQoqygbHNJJ3mE/assets/gallery/group-fx-demo.gif?s=cd3f6e4c1b6164265356934fce536e10" alt="Group effects" width="640" height="360" data-path="assets/gallery/group-fx-demo.gif" />
</Frame>

<Frame caption="perspective-cards.ts — projected 2.5D: parallax depth, a card flip, perspective text receding, a dolly that flattens the field">
  <img src="https://mintcdn.com/reframe/DfIQoqygbHNJJ3mE/assets/gallery/perspective-cards.gif?s=3441caec5853c95cf238fbdf0f8bf855" alt="Perspective cards" width="640" height="360" data-path="assets/gallery/perspective-cards.gif" />
</Frame>

<Frame caption="gradient-demo.ts — linear / radial / conic gradients on rects, ellipses, and paths, animated by moving the node">
  <img src="https://mintcdn.com/reframe/DfIQoqygbHNJJ3mE/assets/gallery/gradient-demo.gif?s=1f14f842ae46667733770355199328c0" alt="Gradient demo" width="640" height="360" data-path="assets/gallery/gradient-demo.gif" />
</Frame>

<Frame caption="matte-demo.ts — track mattes: an alpha matte fills a headline with video, a luma matte irises a photo in">
  <img src="https://mintcdn.com/reframe/DfIQoqygbHNJJ3mE/assets/gallery/matte-demo.gif?s=96dc4bc079bb78c7d9ee615349d45b52" alt="Matte demo" width="640" height="360" data-path="assets/gallery/matte-demo.gif" />
</Frame>

## Data, character & logos

<Frame caption="annual-report.ts — a dashboard: KPI count-ups, growing bars, a draw-on line, a gradient donut, all label-anchored audio">
  <img src="https://mintcdn.com/reframe/DfIQoqygbHNJJ3mE/assets/gallery/annual-report.gif?s=7207ec096364868eef462c2fa24e2b11" alt="Annual report" width="640" height="360" data-path="assets/gallery/annual-report.gif" />
</Frame>

<Frame caption="figure-styles.ts — one dressed figure on the humanoid rig, three swappable skins, driven by a character preset">
  <img src="https://mintcdn.com/reframe/DfIQoqygbHNJJ3mE/assets/gallery/figure-styles.gif?s=e37c77f17d6f63944901fc4e86304adf" alt="Figure styles" width="640" height="360" data-path="assets/gallery/figure-styles.gif" />
</Frame>

<Frame caption="Six real brand logos (React, Figma, Vercel, GitHub, Notion, Stripe), each a different motion preset — npx reframe-video logo react --motion spin-forge">
  <img src="https://mintcdn.com/reframe/DfIQoqygbHNJJ3mE/assets/logo-sting.gif?s=607a74d36a13dd8765f832cb851665f5" alt="Logo stings" width="720" height="480" data-path="assets/logo-sting.gif" />
</Frame>