# Introduction Copy-paste video components for React. Built on Editframe, works with the shadcn CLI. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). **framecn** provides beautifully crafted, production-ready video components for React. Built on [Editframe](https://editframe.com/) and designed to work seamlessly with the [shadcn CLI](https://ui.shadcn.com). ## Philosophy framecn follows the shadcn model — but for video. Components are yours to copy, own, and customize. No runtime lock-in, no black-box abstractions. Just composable Editframe scenes that drop into your stack. Video in product work is often an afterthought — stitched together from stock clips or half-finished motion presets. framecn takes a different approach. Every component is a self-contained, time-based composition: animated in code, renderable to MP4, and built to match the precision of your UI design system. The goal is simple: make video feel like the rest of your stack — composable, themeable, and easy to customize. ## Why framecn? Most video tooling forces you to choose between full creative control and developer ergonomics. framecn is built for teams that want both: - **Own Your Code:** Copy components into your project and customize everything — timing, easing, colors, copy. - **Start Fast:** Run one command and render your first video scene with production-ready defaults. - **Scale Safely:** Compose primitives into full sequences, or drop to raw Editframe APIs when you need more control. ## What's Included framecn ships components across six categories: - **Primitives** — Time-based atoms: cursors, confetti, spring animations, bounding boxes, and indicators. - **Compositions** — Full scenes ready to render: deploy flows, dashboard populates, AI generation beats, hero reveals. - **Transitions** — Scene-to-scene motion: wipes, zooms, kinetic masks, chromatic aberrations, and spatial pushes. - **Typography** — Animated text: typewriters, marquees, glitch decodes, shimmer sweeps, and staggered reveals. - **UI Blocks** — Animated product UI: charts, code diffs, drag-and-drop flows, terminal simulators, bento grids. - **Environment & Lighting** — Atmospheric backgrounds: mesh gradients, dynamic grids, spotlight cards. ## Features
ZapIcon, ClipboardCopyIcon, LayoutGridIcon, Code2Icon, BlocksIcon, SparklesIcon, } from "lucide-react"; # Installation Install video components from the registry. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Prerequisites A project with [Editframe](https://editframe.com/) set up. ## Installation Run the following command to add any component: ```bash npx shadcn@latest add @framecn/cursor-flow ``` ## Usage Import and use the component: ```tsx import { CursorFlow } from "@/components/framecn/cursor-flow"; export function DemoVideo() { return ; } ``` # MCP Learn how to use the shadcn MCP (Model Context Protocol) server with framecn. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). [MCP](https://modelcontextprotocol.io/) is an open protocol that standardizes how applications provide context to LLMs. The shadcn CLI can register an MCP server so your editor can discover registry components—including items you install from **framecn** via the same CLI. ## Configure MCP Run: ```bash npx shadcn@latest mcp init ``` Choose your MCP client when prompted, then enable the MCP server in that client to finish setup. ## Usage With MCP enabled, you can ask your IDE to work with **Editframe** video patterns and framecn registry components. Example prompts: - Animate a CLI-to-browser deploy story with **Terminal To Browser Deploy**, **Terminal Simulator**, and **Browser Flow**. - Compose a hero device beat with **Hero Device Assemble**, **Device Mockup Zoom**, and **Landing Code Showcase**. - Build an AI workflow montage with **AI Generation Canvas**, **AI Generate Overlay**, and **Chat To Preview Layout**. - Pair kinetic typography with atmosphere using **Typewriter**, **Kinetic Type Mask**, and **Mesh Gradient Background**. - Bridge scenes with motion transitions like **Morphing Modal**, **Chromatic Aberration Wipe**, and **Spatial Push**. Install components from this registry with `npx shadcn@latest add` and the JSON URL from each docs page. # Registry Learn how to use the framecn registry with the shadcn CLI. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). The **framecn** registry ships Editframe-based video components and themes in the [shadcn registry format](https://ui.shadcn.com/docs/registry). Register the namespace once in `components.json`, then pull items by name with the CLI. ## Setup Add a **registries** entry for this site. See the [shadcn registry documentation](https://ui.shadcn.com/docs/registry) for all `components.json` fields and behaviors. ```json { "registries": { "@framecn": "https://framecn.dev/r/{name}.json" } } ``` You can replace `@framecn` with another namespace; it only needs to match what you pass to `shadcn add`. ## Usage Install a UI component using the namespace and the item `name` (same as the JSON file under `/r/` without `.json`): ```bash npx shadcn@latest add @framecn/cursor-flow ``` Without a registry alias, use the full URL (as on each docs page): ```bash npx shadcn@latest add https://framecn.dev/r/badge.json ``` # Components Here you can find all the video components available in the library. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). - [Clip Wipe](https://www.framecn.dev/docs/components/captions/clip-wipe.md) - [Editorial Emphasis](https://www.framecn.dev/docs/components/captions/editorial-emphasis.md) - [Emoji Pop](https://www.framecn.dev/docs/components/captions/emoji-pop.md) - [Glitch RGB](https://www.framecn.dev/docs/components/captions/glitch-rgb.md) - [Gradient Fill](https://www.framecn.dev/docs/components/captions/gradient-fill.md) - [Highlight](https://www.framecn.dev/docs/components/captions/highlight.md) - [Captions](https://www.framecn.dev/docs/components/captions.md) - [Kinetic Slam](https://www.framecn.dev/docs/components/captions/kinetic-slam.md) - [Matrix Decode](https://www.framecn.dev/docs/components/captions/matrix-decode.md) - [Neon Accent](https://www.framecn.dev/docs/components/captions/neon-accent.md) - [Neon Glow](https://www.framecn.dev/docs/components/captions/neon-glow.md) - [Parallax Layers](https://www.framecn.dev/docs/components/captions/parallax-layers.md) - [Particle Burst](https://www.framecn.dev/docs/components/captions/particle-burst.md) - [Pill Karaoke](https://www.framecn.dev/docs/components/captions/pill-karaoke.md) - [Texture](https://www.framecn.dev/docs/components/captions/texture.md) - [Weight Shift](https://www.framecn.dev/docs/components/captions/weight-shift.md) - [Compositions](https://www.framecn.dev/docs/components/compositions.md) - [Hero Device Assemble](https://www.framecn.dev/docs/components/compositions/hero-device-assemble.md) - [Ecosystem Constellation](https://www.framecn.dev/docs/components/compositions/ecosystem-constellation.md) - [Infinite Bento Pan](https://www.framecn.dev/docs/components/compositions/infinite-bento-pan.md) - [Product Launch Trailer](https://www.framecn.dev/docs/components/compositions/product-launch-trailer.md) - [Browser Flow](https://www.framecn.dev/docs/components/compositions/browser-flow.md) - [AI Generation Canvas](https://www.framecn.dev/docs/components/compositions/ai-generation-canvas.md) - [AI Generate Overlay](https://www.framecn.dev/docs/components/compositions/ai-generate-overlay.md) - [Live Code Compilation](https://www.framecn.dev/docs/components/compositions/live-code-compilation.md) - [Terminal To Browser Deploy](https://www.framecn.dev/docs/components/compositions/terminal-to-browser-deploy.md) - [Image Expand To Fullscreen](https://www.framecn.dev/docs/components/compositions/image-expand-to-fullscreen.md) - [Dashboard Populate](https://www.framecn.dev/docs/components/compositions/dashboard-populate.md) - [Pipeline Journey](https://www.framecn.dev/docs/components/compositions/pipeline-journey.md) - [Pricing Tier Focus](https://www.framecn.dev/docs/components/compositions/pricing-tier-focus.md) - [Landing Code Showcase](https://www.framecn.dev/docs/components/compositions/landing-code-showcase.md) - [Environment & Lighting](https://www.framecn.dev/docs/components/environment.md) - [Mesh Gradient Background](https://www.framecn.dev/docs/components/environment/mesh-gradient-bg.md) - [Dynamic Grid](https://www.framecn.dev/docs/components/environment/dynamic-grid.md) - [Spotlight Card](https://www.framecn.dev/docs/components/environment/spotlight-card.md) - [Core Primitives](https://www.framecn.dev/docs/components/primitives.md) - [Spring Pop In](https://www.framecn.dev/docs/components/primitives/spring-pop-in.md) - [Pulsing Indicator](https://www.framecn.dev/docs/components/primitives/pulsing-indicator.md) - [Success Confetti](https://www.framecn.dev/docs/components/primitives/success-confetti.md) - [Cursor Flow](https://www.framecn.dev/docs/components/primitives/cursor-flow.md) - [Simulated Cursor](https://www.framecn.dev/docs/components/primitives/simulated-cursor.md) - [Bounding Box Selector](https://www.framecn.dev/docs/components/primitives/bounding-box-selector.md) - [Toast Notification](https://www.framecn.dev/docs/components/primitives/toast-notification.md) - [Backdrop](https://www.framecn.dev/docs/components/primitives/backdrop.md) - [Confetti](https://www.framecn.dev/docs/components/primitives/confetti.md) - [Logo Enter](https://www.framecn.dev/docs/components/primitives/logo-enter.md) - [Transitions](https://www.framecn.dev/docs/components/transitions.md) - [Zoom Through Transition](https://www.framecn.dev/docs/components/transitions/zoom-through-transition.md) - [Device Mockup Zoom](https://www.framecn.dev/docs/components/transitions/device-mockup-zoom.md) - [Morphing Modal](https://www.framecn.dev/docs/components/transitions/morphing-modal.md) - [Directional Wipe](https://www.framecn.dev/docs/components/transitions/directional-wipe.md) - [Spatial Push](https://www.framecn.dev/docs/components/transitions/spatial-push.md) - [Frosted Glass Wipe](https://www.framecn.dev/docs/components/transitions/frosted-glass-wipe.md) - [Kinetic Type Mask](https://www.framecn.dev/docs/components/transitions/kinetic-type-mask.md) - [Swipe Transition Wipe](https://www.framecn.dev/docs/components/transitions/swipe-transition-wipe.md) - [Grid Pixelate Wipe](https://www.framecn.dev/docs/components/transitions/grid-pixelate-wipe.md) - [Chromatic Aberration Wipe](https://www.framecn.dev/docs/components/transitions/chromatic-aberration-wipe.md) - [Fade Through](https://www.framecn.dev/docs/components/transitions/fade-through.md) - [Per Word Crossfade](https://www.framecn.dev/docs/components/transitions/per-word-crossfade.md) - [Shared Axis Y](https://www.framecn.dev/docs/components/transitions/shared-axis-y.md) - [Shared Axis Z](https://www.framecn.dev/docs/components/transitions/shared-axis-z.md) - [Typography](https://www.framecn.dev/docs/components/typography.md) - [Blur Reveal](https://www.framecn.dev/docs/components/typography/blur-reveal.md) - [Staggered Fade Up](https://www.framecn.dev/docs/components/typography/staggered-fade-up.md) - [Masked Slide Reveal](https://www.framecn.dev/docs/components/typography/masked-slide-reveal.md) - [Tracking In](https://www.framecn.dev/docs/components/typography/tracking-in.md) - [Inline Highlight](https://www.framecn.dev/docs/components/typography/inline-highlight.md) - [Marker Highlight](https://www.framecn.dev/docs/components/typography/marker-highlight.md) - [Shimmer Sweep](https://www.framecn.dev/docs/components/typography/shimmer-sweep.md) - [Typewriter](https://www.framecn.dev/docs/components/typography/typewriter.md) - [Text Fade Replace](https://www.framecn.dev/docs/components/typography/text-fade-replace.md) - [Slot Machine Roll](https://www.framecn.dev/docs/components/typography/slot-machine-roll.md) - [Infinite Marquee](https://www.framecn.dev/docs/components/typography/infinite-marquee.md) - [Perspective Marquee](https://www.framecn.dev/docs/components/typography/perspective-marquee.md) - [Matrix Decode](https://www.framecn.dev/docs/components/typography/matrix-decode.md) - [RGB Glitch Text](https://www.framecn.dev/docs/components/typography/rgb-glitch-text.md) - [Strikethrough Replace](https://www.framecn.dev/docs/components/typography/strikethrough-replace.md) - [Blur Out Up](https://www.framecn.dev/docs/components/typography/blur-out-up.md) - [Bottom Up Letters](https://www.framecn.dev/docs/components/typography/bottom-up-letters.md) - [Top Down Letters](https://www.framecn.dev/docs/components/typography/top-down-letters.md) - [Per Character Rise](https://www.framecn.dev/docs/components/typography/per-character-rise.md) - [Soft Blur In](https://www.framecn.dev/docs/components/typography/soft-blur-in.md) - [Micro Scale Fade](https://www.framecn.dev/docs/components/typography/micro-scale-fade.md) - [Scale Down Fade](https://www.framecn.dev/docs/components/typography/scale-down-fade.md) - [Focus Blur Resolve](https://www.framecn.dev/docs/components/typography/focus-blur-resolve.md) - [Spring Scale In](https://www.framecn.dev/docs/components/typography/spring-scale-in.md) - [Line by Line Slide](https://www.framecn.dev/docs/components/typography/line-by-line-slide.md) - [Mask Reveal Up](https://www.framecn.dev/docs/components/typography/mask-reveal-up.md) - [Short Slide Right](https://www.framecn.dev/docs/components/typography/short-slide-right.md) - [UI Blocks](https://www.framecn.dev/docs/components/ui-blocks.md) - [Glass Code Block](https://www.framecn.dev/docs/components/ui-blocks/glass-code-block.md) - [Terminal Simulator](https://www.framecn.dev/docs/components/ui-blocks/terminal-simulator.md) - [Code Accordion](https://www.framecn.dev/docs/components/ui-blocks/code-accordion.md) - [Code Diff Wipe](https://www.framecn.dev/docs/components/ui-blocks/code-diff-wipe.md) - [Staggered Bento Grid](https://www.framecn.dev/docs/components/ui-blocks/staggered-bento-grid.md) - [Chat To Preview Layout](https://www.framecn.dev/docs/components/ui-blocks/chat-to-preview-layout.md) - [Animated Line Chart](https://www.framecn.dev/docs/components/ui-blocks/animated-line-chart.md) - [Animated Bar Chart](https://www.framecn.dev/docs/components/ui-blocks/animated-bar-chart.md) - [Data Flow Pipes](https://www.framecn.dev/docs/components/ui-blocks/data-flow-pipes.md) - [Progress Steps](https://www.framecn.dev/docs/components/ui-blocks/progress-steps.md) - [Drag And Drop Flow](https://www.framecn.dev/docs/components/ui-blocks/drag-and-drop-flow.md) # Shaders WebGL shader backdrops from paper-design/shaders, adapted for Editframe timeline rendering. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). # May 4, 2026 - Initial Release First release of framecn with 61 video components and customizer. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). We shipped the initial release of framecn with 61 video components built on Editframe, and customizer configuration types with shared controls. # June 15, 2026 - Caption Components 11 new caption components for animated video text effects. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). We added 11 new caption components for animated video text effects: [clip-wipe](https://www.framecn.dev/docs/components/captions/clip-wipe.md), [emoji-pop](https://www.framecn.dev/docs/components/captions/emoji-pop.md), [glitch-rgb](https://www.framecn.dev/docs/components/captions/glitch-rgb.md), [gradient-fill](https://www.framecn.dev/docs/components/captions/gradient-fill.md), [highlight](https://www.framecn.dev/docs/components/captions/highlight.md), [kinetic-slam](https://www.framecn.dev/docs/components/captions/kinetic-slam.md), [neon-accent](https://www.framecn.dev/docs/components/captions/neon-accent.md), [neon-glow](https://www.framecn.dev/docs/components/captions/neon-glow.md), [pill-karaoke](https://www.framecn.dev/docs/components/captions/pill-karaoke.md), [texture](https://www.framecn.dev/docs/components/captions/texture.md), and [weight-shift](https://www.framecn.dev/docs/components/captions/weight-shift.md). # June 26, 2026 - Primitives, Transitions & Typography 19 new components across primitives, transitions, and typography categories. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). We added 19 new components across three categories. **Primitives** — 3 new components: [backdrop](https://www.framecn.dev/docs/components/primitives/backdrop.md), [confetti](https://www.framecn.dev/docs/components/primitives/confetti.md), and [logo-enter](https://www.framecn.dev/docs/components/primitives/logo-enter.md). **Transitions** — 4 new components: [fade-through](https://www.framecn.dev/docs/components/transitions/fade-through.md), [per-word-crossfade](https://www.framecn.dev/docs/components/transitions/per-word-crossfade.md), [shared-axis-y](https://www.framecn.dev/docs/components/transitions/shared-axis-y.md), and [shared-axis-z](https://www.framecn.dev/docs/components/transitions/shared-axis-z.md). **Typography** — 12 new components: [blur-out-up](https://www.framecn.dev/docs/components/typography/blur-out-up.md), [bottom-up-letters](https://www.framecn.dev/docs/components/typography/bottom-up-letters.md), [focus-blur-resolve](https://www.framecn.dev/docs/components/typography/focus-blur-resolve.md), [line-by-line-slide](https://www.framecn.dev/docs/components/typography/line-by-line-slide.md), [mask-reveal-up](https://www.framecn.dev/docs/components/typography/mask-reveal-up.md), [micro-scale-fade](https://www.framecn.dev/docs/components/typography/micro-scale-fade.md), [per-character-rise](https://www.framecn.dev/docs/components/typography/per-character-rise.md), [scale-down-fade](https://www.framecn.dev/docs/components/typography/scale-down-fade.md), [short-slide-right](https://www.framecn.dev/docs/components/typography/short-slide-right.md), [soft-blur-in](https://www.framecn.dev/docs/components/typography/soft-blur-in.md), [spring-scale-in](https://www.framecn.dev/docs/components/typography/spring-scale-in.md), and [top-down-letters](https://www.framecn.dev/docs/components/typography/top-down-letters.md). # July 2, 2026 - Shader Components 18 new WebGL shader components powered by paper-design/shaders, with a dedicated docs section. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). We added 18 new shader components: [color-panels](https://www.framecn.dev/docs/shaders/components/color-panels.md), [dithering](https://www.framecn.dev/docs/shaders/components/dithering.md), [dot-orbit](https://www.framecn.dev/docs/shaders/components/dot-orbit.md), [god-rays](https://www.framecn.dev/docs/shaders/components/god-rays.md), [grain-gradient](https://www.framecn.dev/docs/shaders/components/grain-gradient.md), [liquid-metal](https://www.framecn.dev/docs/shaders/components/liquid-metal.md), [mesh-gradient](https://www.framecn.dev/docs/shaders/components/mesh-gradient.md), [metaballs](https://www.framecn.dev/docs/shaders/components/metaballs.md), [neuro-noise](https://www.framecn.dev/docs/shaders/components/neuro-noise.md), [perlin-noise](https://www.framecn.dev/docs/shaders/components/perlin-noise.md), [pulsing-border](https://www.framecn.dev/docs/shaders/components/pulsing-border.md), [simplex-noise](https://www.framecn.dev/docs/shaders/components/simplex-noise.md), [smoke-ring](https://www.framecn.dev/docs/shaders/components/smoke-ring.md), [spiral](https://www.framecn.dev/docs/shaders/components/spiral.md), [swirl](https://www.framecn.dev/docs/shaders/components/swirl.md), [voronoi](https://www.framecn.dev/docs/shaders/components/voronoi.md), [warp](https://www.framecn.dev/docs/shaders/components/warp.md), and [water](https://www.framecn.dev/docs/shaders/components/water.md) powered by `@paper-design/shaders-react`. # Changelog Latest updates and announcements. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). Latest updates and announcements. # Clip Wipe Words reveal left-to-right via clip-path; keywords turn gold on speak; the group exits with a wipe. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/caption-clip-wipe ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { CaptionClipWipe } from "@/components/framecn/caption-clip-wipe"; ``` ```tsx ``` ## API Reference ### CaptionClipWipe | Prop | Type | Default | | ------------------ | ------------------ | --------------------- | | `words` | `CaptionWord[]` | (demo words) | | `keywords` | `string[]` | `["single", "code."]` | | `color` | `string` | `"#ffffff"` | | `keywordColor` | `string` | `"#FFD700"` | | `fontSize` | `number` | `72` | | `fontWeight` | `number \| string` | `700` | | `background` | `string` | `"#0a0a0a"` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `180` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes The `start` and `end` fields on each `CaptionWord` are in seconds. # Editorial Emphasis Editorial two-font layout — normal Inter text with oversized italic Playfair Display for key words. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/caption-editorial-emphasis ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { CaptionEditorialEmphasis } from "@/components/framecn/caption-editorial-emphasis"; ``` ```tsx ``` ## API Reference ### CaptionEditorialEmphasis | Prop | Type | Default | | ------------------ | ------------------ | --------------------- | | `words` | `CaptionWord[]` | (demo words) | | `emphasisWords` | `string[]` | `["single", "code."]` | | `color` | `string` | `"#f5f0d0"` | | `fontSize` | `number` | `56` | | `fontWeight` | `number \| string` | `"400"` | | `emphasisScale` | `number` | `2` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `180` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes The `start` and `end` fields on each `CaptionWord` are in seconds. # Emoji Pop Word groups with a contextual emoji above, spring scale-in/out animation. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/caption-emoji-pop ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { CaptionEmojiPop } from "@/components/framecn/caption-emoji-pop"; ``` ```tsx ``` ## API Reference ### CaptionEmojiPop | Prop | Type | Default | | ------------------ | ------------------ | ------------ | | `words` | `CaptionWord[]` | (demo words) | | `color` | `string` | `"#ffffff"` | | `accentColor` | `string` | `"#FF76FF"` | | `fontSize` | `number` | `72` | | `fontWeight` | `number \| string` | `900` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `180` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes The `start` and `end` fields on each `CaptionWord` are in seconds. # Glitch RGB RGB channel separation red+cyan text-shadow glitch effect on each word entry. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/caption-glitch-rgb ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { CaptionGlitchRgb } from "@/components/framecn/caption-glitch-rgb"; ``` ```tsx ``` ## API Reference ### CaptionGlitchRgb | Prop | Type | Default | | ------------------ | ------------------ | ------------ | | `words` | `CaptionWord[]` | (demo words) | | `color` | `string` | `"#ffffff"` | | `glitchRedColor` | `string` | `"#ff003c"` | | `glitchCyanColor` | `string` | `"#00e5ff"` | | `fontSize` | `number` | `88` | | `fontWeight` | `number \| string` | `700` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `180` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes The `start` and `end` fields on each `CaptionWord` are in seconds. # Gradient Fill Siri-style gradient sweeps across text via background-clip on each word speaking window. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/caption-gradient-fill ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { CaptionGradientFill } from "@/components/framecn/caption-gradient-fill"; ``` ```tsx ``` ## API Reference ### CaptionGradientFill | Prop | Type | Default | | ------------------ | ------------------ | ------------ | | `words` | `CaptionWord[]` | (demo words) | | `fromColor` | `string` | `"#fe9f1b"` | | `midColor` | `string` | `"#ff2063"` | | `toColor` | `string` | `"#ef7aff"` | | `fontSize` | `number` | `80` | | `fontWeight` | `number \| string` | `900` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `180` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes The `start` and `end` fields on each `CaptionWord` are in seconds. # Highlight Word-by-word captions with an accent-colored highlight background that sweeps in behind each spoken word. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/caption-highlight ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { CaptionHighlight } from "@/components/framecn/caption-highlight"; import type { CaptionWord } from "@/components/framecn/caption-highlight"; ``` ```tsx const words: CaptionWord[] = [ { text: "Every", start: 0.0, end: 0.35 }, { text: "great", start: 0.35, end: 0.65 }, { text: "video", start: 0.65, end: 1.0 }, // ... ]; ; ``` ## API Reference ### CaptionHighlight | Prop | Type | Default | | ------------------ | --------------- | ------------ | | `words` | `CaptionWord[]` | (demo words) | | `wordsPerGroup` | `number` | `3` | | `color` | `string` | `"#ffffff"` | | `highlightColor` | `string` | `"#ff1745"` | | `fontSize` | `number` | `72` | | `fontWeight` | `number` | `800` | | `background` | `string` | `"#0a0a0a"` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `180` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ### CaptionWord | Field | Type | Description | | ------- | -------- | --------------------- | | `text` | `string` | The word text | | `start` | `number` | Start time in seconds | | `end` | `number` | End time in seconds | ## Notes The `wordsPerGroup` prop controls how many words appear on screen at once. Groups fade in together and out together, with each word's highlight timed to its `start`/`end` window. The `start` and `end` fields on each `CaptionWord` are in seconds, not milliseconds or frames. Pass the raw transcript timing from your speech-to-text provider directly. # Captions Word-level caption components for video — karaoke highlights, kinetic type, and animated overlays. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). # Kinetic Slam One word at a time, uppercase centered, slams in from above and scales down to rest. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/caption-kinetic-slam ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { CaptionKineticSlam } from "@/components/framecn/caption-kinetic-slam"; import type { CaptionWord } from "@/components/framecn/caption-kinetic-slam"; ``` ```tsx const words: CaptionWord[] = [ { text: "Every", start: 0.0, end: 0.35 }, { text: "great", start: 0.35, end: 0.65 }, // ... ]; ; ``` ## API Reference ### CaptionKineticSlam | Prop | Type | Default | | ------------------ | --------------- | ------------ | | `words` | `CaptionWord[]` | (demo words) | | `color` | `string` | `"#ffffff"` | | `fontSize` | `number` | `120` | | `fontWeight` | `number` | `900` | | `background` | `string` | `"#0a0a0a"` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `180` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ### CaptionWord | Field | Type | Description | | ------- | -------- | --------------------- | | `text` | `string` | The word text | | `start` | `number` | Start time in seconds | | `end` | `number` | End time in seconds | ## Notes Kinetic Slam works best for high-energy clips where each word carries weight. Words are displayed one at a time, full-width centered. For denser narration, use Caption Highlight or Caption Pill Karaoke instead. The component prefers Anton (a condensed display face) with Impact and system-ui as fallbacks. For best results, load Anton from Google Fonts in your project. # Matrix Decode Matrix-style green monospace text that decodes from blurry/bright to sharp using a stepped animation. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/caption-matrix-decode ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { CaptionMatrixDecode } from "@/components/framecn/caption-matrix-decode"; ``` ```tsx ``` ## API Reference ### CaptionMatrixDecode | Prop | Type | Default | | ------------------ | ------------------ | ------------ | | `words` | `CaptionWord[]` | (demo words) | | `color` | `string` | `"#00ff41"` | | `fontSize` | `number` | `80` | | `fontWeight` | `number \| string` | `700` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `180` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes The `start` and `end` fields on each `CaptionWord` are in seconds. # Neon Accent Normal words with accent keywords at 1.5x size and a neon glow text-shadow. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/caption-neon-accent ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { CaptionNeonAccent } from "@/components/framecn/caption-neon-accent"; ``` ```tsx ``` ## API Reference ### CaptionNeonAccent | Prop | Type | Default | | ------------------ | ------------------ | --------------------- | | `words` | `CaptionWord[]` | (demo words) | | `accentWords` | `string[]` | `["frame.", "code."]` | | `color` | `string` | `"#ffffff"` | | `accentColor` | `string` | `"#a855f7"` | | `fontSize` | `number` | `64` | | `fontWeight` | `number \| string` | `700` | | `accentScale` | `number` | `1.5` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `180` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes The `start` and `end` fields on each `CaptionWord` are in seconds. # Neon Glow All words start at 14% opacity neon; they burst to full glow when spoken. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/caption-neon-glow ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { CaptionNeonGlow } from "@/components/framecn/caption-neon-glow"; ``` ```tsx ``` ## API Reference ### CaptionNeonGlow | Prop | Type | Default | | ------------------ | ------------------ | ------------ | | `words` | `CaptionWord[]` | (demo words) | | `glowColor` | `string` | `"#00fff0"` | | `fontSize` | `number` | `80` | | `fontWeight` | `number \| string` | `900` | | `wordsPerGroup` | `number` | `6` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `180` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes The `start` and `end` fields on each `CaptionWord` are in seconds. # Parallax Layers Two depth layers — large translucent italic text behind, clean text in front. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/caption-parallax-layers ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { CaptionParallaxLayers } from "@/components/framecn/caption-parallax-layers"; ``` ```tsx ``` ## API Reference ### CaptionParallaxLayers | Prop | Type | Default | | ------------------ | ------------------ | ------------ | | `words` | `CaptionWord[]` | (demo words) | | `color` | `string` | `"#ffffff"` | | `behindColor` | `string` | `"#a78bfa"` | | `fontSize` | `number` | `56` | | `fontWeight` | `number \| string` | `700` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `180` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes The `start` and `end` fields on each `CaptionWord` are in seconds. # Particle Burst Words dim at 40% opacity; a colored burst ring expands outward when each word is spoken. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/caption-particle-burst ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { CaptionParticleBurst } from "@/components/framecn/caption-particle-burst"; ``` ```tsx ``` ## API Reference ### CaptionParticleBurst | Prop | Type | Default | | ------------------ | ------------------ | ------------ | | `words` | `CaptionWord[]` | (demo words) | | `color` | `string` | `"#ffffff"` | | `burstColor` | `string` | `"#fbbf24"` | | `fontSize` | `number` | `80` | | `fontWeight` | `number \| string` | `900` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `180` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes The `start` and `end` fields on each `CaptionWord` are in seconds. # Pill Karaoke Karaoke-style captions in a rounded pill container — active word snaps to full contrast, others stay dimmed. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/caption-pill-karaoke ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { CaptionPillKaraoke } from "@/components/framecn/caption-pill-karaoke"; import type { CaptionWord } from "@/components/framecn/caption-pill-karaoke"; ``` ```tsx const words: CaptionWord[] = [ { text: "Every", start: 0.0, end: 0.35 }, { text: "great", start: 0.35, end: 0.65 }, // ... ]; ; ``` ## API Reference ### CaptionPillKaraoke | Prop | Type | Default | | ------------------ | --------------- | ------------ | | `words` | `CaptionWord[]` | (demo words) | | `wordsPerSegment` | `number` | `6` | | `activeColor` | `string` | `"#1a1a1a"` | | `dimColor` | `string` | `"#a6a6a6"` | | `pillColor` | `string` | `"#e7e5e7"` | | `fontSize` | `number` | `60` | | `fontWeight` | `number` | `700` | | `background` | `string` | `"#0a0a0a"` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `180` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ### CaptionWord | Field | Type | Description | | ------- | -------- | --------------------- | | `text` | `string` | The word text | | `start` | `number` | Start time in seconds | | `end` | `number` | End time in seconds | ## Notes `wordsPerSegment` determines how many words share a pill at once. A new pill slides in each time a new segment starts. Set it lower for shorter, punchier pills or higher for longer lines. The defaults use a light pill with dark text. For a dark pill on a light background, swap: `pillColor="#1a1a1a"`, `activeColor="#ffffff"`, `dimColor="#555555"`. # Texture Lava-texture fill via layered radial-gradients and background-clip: text, kinetic-slam style. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/caption-texture ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { CaptionTexture } from "@/components/framecn/caption-texture"; ``` ```tsx ``` ## API Reference ### CaptionTexture | Prop | Type | Default | | ------------------ | ------------------ | ------------ | | `words` | `CaptionWord[]` | (demo words) | | `textureFrom` | `string` | `"#ff6414"` | | `textureMid` | `string` | `"#ff2200"` | | `textureTo` | `string` | `"#ffd000"` | | `fontSize` | `number` | `120` | | `fontWeight` | `number \| string` | `900` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `180` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes The `start` and `end` fields on each `CaptionWord` are in seconds. # Weight Shift Font weight animates from 100 to 900 when each word is spoken, back to thin after. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/caption-weight-shift ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { CaptionWeightShift } from "@/components/framecn/caption-weight-shift"; ``` ```tsx ``` ## API Reference ### CaptionWeightShift | Prop | Type | Default | | ------------------ | --------------- | -------------------------- | | `words` | `CaptionWord[]` | (demo words) | | `color` | `string` | `"#ffffff"` | | `activeColor` | `string` | `"#ffffff"` | | `dimColor` | `string` | `"rgba(255,255,255,0.35)"` | | `fontSize` | `number` | `72` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `180` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes The `start` and `end` fields on each `CaptionWord` are in seconds. # Dynamic Grid Subtle moving grid or dot pattern background. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/dynamic-grid ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { DynamicGrid } from "@/components/framecn/dynamic-grid"; ``` ```tsx ``` ## API Reference ### DynamicGrid | Prop | Type | Default | | ------------------ | ------------------------------------------ | ------------ | | `cellSize` | `number` | `40` | | `lineColor` | `string` | `"#27272a"` | | `background` | `string` | `"#0a0a0a"` | | `speed` | `number` | `0.5` | | `direction` | `"diagonal" \| "horizontal" \| "vertical"` | `"diagonal"` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `150` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes A subtle grid or dot pattern that can animate for depth. Great for tech or developer-focused backgrounds. # Environment & Lighting Backgrounds, lighting, and atmosphere for your scenes. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). # Mesh Gradient Background Living gradient where soft color blobs drift on noise-driven coordinates. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/mesh-gradient-bg ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { MeshGradientBackground } from "@/components/framecn/mesh-gradient-bg"; ``` ```tsx ``` ## API Reference ### MeshGradientBg | Prop | Type | Default | | ------------------ | ---------- | ---------------------------------------------- | | `colors` | `string[]` | `["#ff0080", "#7928ca", "#00d4ff", "#ffb800"]` | | `speed` | `number` | `1` | | `blur` | `number` | `80` | | `background` | `string` | `"#0a0a0a"` | | `className` | `string` | `-` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `150` | | `width` | `number` | `1280` | | `height` | `number` | `720` | ## Notes Color blobs drift on noise-driven coordinates creating a living, organic gradient effect. Great for backgrounds. # Spotlight Card Cursor-tracked radial light that rims a card and lifts it from the dark. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/spotlight-card ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { SpotlightCard } from "@/components/framecn/spotlight-card"; ``` ```tsx ``` ## API Reference ### SpotlightCard | Prop | Type | Default | | ------------------ | ----------- | ---------------------------------------------------------------------- | | `title` | `string` | `"Spotlight Card"` | | `body` | `string` | `"Soft radial light follows the cursor, picking out the microborder."` | | `cardWidth` | `number` | `520` | | `cardHeight` | `number` | `320` | | `glowSize` | `number` | `600` | | `glowOpacity` | `number` | `0.08` | | `background` | `string` | `"#050505"` | | `cardColor` | `string` | `"#0a0a0a"` | | `textColor` | `string` | `"#fafafa"` | | `mutedColor` | `string` | `"#71717a"` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `150` | | `className` | `string` | `-` | | `children` | `ReactNode` | `-` | ## Notes A radial spotlight follows the cursor and rims the card edges. Creates a dramatic lifting effect from a dark background. # AI Generate Overlay Overlay UI for AI content generation with prompt input and result display. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/ai-generate-overlay ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { AIGenerateOverlay } from "@/components/framecn/ai-generate-overlay"; ``` ```tsx ``` ## API Reference ### AIGenerateOverlay | Prop | Type | Default | | ------------------ | -------- | ---------------------- | | `maxBlur` | `number` | `20` | | `blurStartFrame` | `number` | `20` | | `blurPeakFrame` | `number` | `40` | | `revealStartFrame` | `number` | `110` | | `pillText` | `string` | `"Generating…"` | | `accent` | `string` | `"#a78bfa"` | | `background` | `string` | `"#050505"` | | `sourceImageBg` | `string` | `DEFAULT_SOURCE_BG` | | `generatedImageBg` | `string` | `DEFAULT_GENERATED_BG` | | `dotColor` | `string` | `"#ffffff"` | | `dotSize` | `number` | `1.2` | | `dotSpacing` | `number` | `20` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `150` | | `className` | `string` | `-` | ## Notes The overlay shows prompt input with generating state. Great for AI product demos showing the generation workflow. # AI Generation Canvas Prompt input morphs into a header, then a skeleton dashboard flips into populated cards. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/ai-generation-canvas ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { AIGenerationCanvas } from "@/components/framecn/ai-generation-canvas"; ``` ```tsx ``` ## API Reference ### AIGenerationCanvas | Prop | Type | Default | | ------------------ | -------- | ------------------------ | | `prompt` | `string` | `"Generate a dashboard"` | | `accentColor` | `string` | `"#7c3aed"` | | `cardCount` | `number` | `4` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `180` | | `className` | `string` | `-` | ## Notes The composition shows: prompt input, header morph, then skeleton-to-populated dashboard flip. Great for AI product demos. # Browser Flow Full Safari/Chrome simulation: URL typing, loading bar, scroll, and click. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/browser-flow ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { BrowserFlow } from "@/components/framecn/browser-flow"; ``` ```tsx ``` ## API Reference ### BrowserFlow | Prop | Type | Default | | ------------------ | -------- | --------------- | | `url` | `string` | `"framecn.dev"` | | `speed` | `number` | `1` | | `className` | `string` | `-` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `270` | | `width` | `number` | `1280` | | `height` | `number` | `720` | ## Notes The browser flow combines multiple animations: URL typing, loading bar, scroll, and click. Each stage can be toggled independently. # Dashboard Populate Empty dashboard cascades to life with KPI count-ups, bar bounces, line traces, and a donut fill. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/dashboard-populate ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { DashboardPopulate } from "@/components/framecn/dashboard-populate"; ``` ```tsx ``` ## API Reference ### DashboardPopulate | Prop | Type | Default | | ------------------ | -------- | ----------- | | `accentColor` | `string` | `"#22c55e"` | | `kpiTarget` | `number` | `128_400` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `180` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes Combines count-ups, bar bounces, line traces, and donut fills. Great for SaaS product demos showing data visualization. # Ecosystem Constellation Central logo orbited by integration satellites with pulsing data lines. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/ecosystem-constellation ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { EcosystemConstellation } from "@/components/framecn/ecosystem-constellation"; ``` ```tsx ``` ## API Reference ### EcosystemConstellation | Prop | Type | Default | | ------------------ | -------- | ----------- | | `satelliteCount` | `number` | `6` | | `centerLabel` | `string` | `"V"` | | `accentColor` | `string` | `"#a855f7"` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `240` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes A central logo is orbited by integration icons with pulsing connection lines. Great for showcasing integrations or partner ecosystems. # Hero Device Assemble Floating device layers spring into a laptop or phone, then the screen wakes with a shimmer. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/hero-device-assemble ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { HeroDeviceAssemble } from "@/components/framecn/hero-device-assemble"; ``` ```tsx ``` ## API Reference ### HeroDeviceAssemble | Prop | Type | Default | | ------------------ | --------------------- | ----------- | | `assembleStart` | `number` | `0` | | `device` | `"laptop" \| "phone"` | `"laptop"` | | `accentColor` | `string` | `"#22c55e"` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `150` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes Devices spring into place from floating layers, then the screen wakes with a shimmer effect. The device prop selects laptop or phone. # Image Expand To Fullscreen Image expands from thumbnail to fullscreen with smooth transition. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/image-expand-to-fullscreen ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ImageExpandToFullscreen } from "@/components/framecn/image-expand-to-fullscreen"; ``` ```tsx ``` ## API Reference ### ImageExpandToFullscreen | Prop | Type | Default | | ------------------ | ----------------- | --------------------------------------------------------------------- | | `from` | `ImageExpandRect` | `DEFAULT_FROM` | | `to` | `ImageExpandRect` | `DEFAULT_TO` | | `borderRadiusFrom` | `number` | `12` | | `borderRadiusTo` | `number` | `16` | | `morphAt` | `number` | `30` | | `imageColorA` | `string` | `"#ff6b6b"` | | `imageColorB` | `string` | `"#845ec2"` | | `imageColorC` | `string` | `"#4d8dff"` | | `feedBackground` | `string` | `"#f4f4f5"` | | `editorBackground` | `string` | `"#0a0a0a"` | | `accent` | `string` | `"#fafafa"` | | `postAuthor` | `string` | `"Maya Larsson"` | | `postBody` | `string` | `"Sunset over the old harbor — color graded straight out of camera."` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `150` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | # Compositions Full scenes built by composing primitives and UI blocks. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). # Infinite Bento Pan Camera diagonally drifts across an oversized bento grid behind a soft vignette. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/infinite-bento-pan ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { InfiniteBentoPan } from "@/components/framecn/infinite-bento-pan"; ``` ```tsx ``` ## API Reference ### InfiniteBentoPan | Prop | Type | Default | | ------------------ | -------- | ----------- | | `panSpeed` | `number` | `1` | | `accentColor` | `string` | `"#7c3aed"` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `300` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes The camera drifts diagonally across an oversized bento grid layout. A soft vignette frames the edges for depth. # Landing Code Showcase Code snippet showcase for landing pages. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/landing-code-showcase ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { LandingCodeShowcase } from "@/components/framecn/landing-code-showcase"; ``` ```tsx ``` ## API Reference ### LandingCodeShowcase | Prop | Type | Default | | ------------- | -------- | ----------- | | `accentColor` | `string` | `"#FFB38E"` | | `speed` | `number` | `1` | ## Notes Code snippets with syntax highlighting for landing pages. Supports multiple languages. # Live Code Compilation Split-screen where typed code on the left snaps a live UI preview on the right. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/live-code-compilation ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { LiveCodeCompilation } from "@/components/framecn/live-code-compilation"; ``` ```tsx ``` ## API Reference ### LiveCodeCompilation | Prop | Type | Default | | ------------------ | -------- | ----------- | | `accentColor` | `string` | `"#3b82f6"` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `290` | | `width` | `number` | `1280` | | `height` | `number` | `900` | | `className` | `string` | `-` | ## Notes Code typing on the left triggers live UI updates on the right. Great for code editor or developer tool demos. # Pipeline Journey Kanban ticket flies between columns, triggering events on landing. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/pipeline-journey ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { PipelineJourney } from "@/components/framecn/pipeline-journey"; ``` ```tsx ``` ## API Reference ### PipelineJourney | Prop | Type | Default | | ------------------ | -------- | ------------------ | | `cardLabel` | `string` | `"Build pipeline"` | | `accentColor` | `string` | `"#22c55e"` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `200` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes A ticket flies between configured columns with spring physics. Triggers landing events when the ticket reaches the destination. # Pricing Tier Focus Three pricing cards where the focused tier rises and brightens while siblings dim and blur. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/pricing-tier-focus ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { PricingTierFocus } from "@/components/framecn/pricing-tier-focus"; ``` ```tsx ``` ## API Reference ### PricingTierFocus | Prop | Type | Default | | ------------------ | -------- | ----------- | | `focusedTier` | `number` | `1` | | `accentColor` | `string` | `"#22c55e"` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `180` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes The focused tier rises and brightens while other tiers dim and blur. Great for pricing page highlights. # Product Launch Trailer Cinematic product reveal trailer animation. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/product-launch-trailer ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ProductLaunchTrailer } from "@/components/framecn/product-launch-trailer"; ``` ```tsx ``` ## API Reference ### ProductLaunchTrailer | Prop | Type | Default | | ---------------- | -------- | ---------------- | | `logoLabel` | `string` | `"R"` | | `productName` | `string` | `"Framecn"` | | `versionLabel` | `string` | `"v1.0 is live"` | | `accentPeach` | `string` | `"#FFB38E"` | | `accentLavender` | `string` | `"#D4B3FF"` | | `accentMint` | `string` | `"#A1EEBD"` | | `background` | `string` | `"#141318"` | | `speed` | `number` | `1` | | `className` | `string` | `-` | ## Notes A cinematic trailer animation for product launches. Combines multiple effects for a dramatic reveal sequence. # Terminal To Browser Deploy CLI deploy completes, terminal blurs back, and a browser window springs from the deploy URL. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/terminal-to-browser-deploy ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { TerminalToBrowserDeploy } from "@/components/framecn/terminal-to-browser-deploy"; ``` ```tsx ``` ## API Reference ### TerminalToBrowserDeploy | Prop | Type | Default | | ------------------ | -------- | --------------------------- | | `siteUrl` | `string` | `"https://app.example.com"` | | `accentColor` | `string` | `"#22c55e"` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `210` | | `className` | `string` | `-` | ## Notes Terminal animates command execution, blurs, then a browser window springs open from the URL. Perfect for deployment product demos. # Getting Started Learn how to set up and use Framecn in your Next.js project. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Install the `@editframe/elements` package: ```bash npm install @editframe/elements ``` ## Quick Start Import video components and create compositions: ```tsx import { Typewriter } from "@editframe/elements"; import { Composition } from "@editframe/elements/server"; export default function VideoPage() { return ( ); } ``` ## Rendering Videos Use the Editframe SDK to render your compositions to MP4: ```tsx import { Editframe } from "@editframe/sdk"; const editframe = new Editframe({ apiKey: "your-api-key" }); const render = await editframe.renders.create({ compositionId: "MyVideo", outputFormat: "mp4", }); ``` ## Next Steps - Browse the [Components](https://www.framecn.dev/docs/components.md) gallery - Explore [Typography](https://www.framecn.dev/docs/typography.md) effects - Learn about [Transitions](https://www.framecn.dev/docs/transitions.md) and scene changes - Check out full [Compositions](https://www.framecn.dev/docs/compositions.md) templates # Chromatic Aberration Wipe An ultra-fast slide transition with an RGB glitch on the peak frames. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/chromatic-aberration-wipe ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ChromaticAberrationWipe } from "@/components/framecn/chromatic-aberration-wipe"; ``` ```tsx ``` ## API Reference ### ChromaticAberrationWipe | Prop | Type | Default | | -------------------- | ------------------- | --------- | | `from` | `ReactNode` | `-` | | `to` | `ReactNode` | `-` | | `direction` | `"left" \| "right"` | `"left"` | | `transitionStart` | `number` | `36` | | `transitionDuration` | `number` | `7` | | `aberrationOffset` | `number` | `8` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `background` | `string` | `"black"` | | `className` | `string` | `-` | ## Notes The RGB channels split and offset during the peak of the transition, creating a glitch effect. The intensity controls the offset amount. # Device Mockup Zoom Pull back from a UI to reveal it inside a phone or laptop frame. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/device-mockup-zoom ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { DeviceMockupZoom } from "@/components/framecn/device-mockup-zoom"; ``` ```tsx ``` ## API Reference ### DeviceMockupZoom | Prop | Type | Default | | ------------------ | --------------------- | ----------- | | `children` | `ReactNode` | `-` | | `device` | `"laptop" \| "phone"` | `"laptop"` | | `frameColor` | `string` | `"#1f1f1f"` | | `screenColor` | `string` | `"#0a0a0a"` | | `background` | `string` | `"#fafafa"` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `120` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | # Directional Wipe Slide one scene in while pushing the other out. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/directional-wipe ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { DirectionalWipe } from "@/components/framecn/directional-wipe"; ``` ```tsx ``` ## API Reference ### DirectionalWipe | Prop | Type | Default | | -------------------- | ------------------------------------- | --------- | | `from` | `ReactNode` | `-` | | `to` | `ReactNode` | `-` | | `direction` | `"left" \| "right" \| "up" \| "down"` | `"left"` | | `transitionStart` | `number` | `36` | | `transitionDuration` | `number` | `20` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `background` | `string` | `"black"` | | `className` | `string` | `-` | ## Notes One scene slides in while pushing the other out in the specified direction. The duration controls the transition speed. # Fade Through One text fades out while a new one fades in with a slight blur and motion offset. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/fade-through ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { FadeThrough } from "@/components/framecn/fade-through"; ``` ```tsx ``` ## API Reference ### FadeThrough | Prop | Type | Default | | ------------------ | -------- | --------------- | | `fromText` | `string` | `"Hello world"` | | `toText` | `string` | `"New world"` | | `fontSize` | `number` | `72` | | `color` | `string` | `"#171717"` | | `fontWeight` | `number` | `600` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ## Notes The enter animation begins one frame after the exit animation finishes, creating a smooth handoff. Adjust `speed` to control the overall pace of the transition. # Frosted Glass Wipe Elegant scene transition through a sliding pane of frosted glass. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/frosted-glass-wipe ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { FrostedGlassWipe } from "@/components/framecn/frosted-glass-wipe"; ``` ```tsx ``` ## API Reference ### FrostedGlassWipe | Prop | Type | Default | | -------------------- | ----------- | --------- | | `from` | `ReactNode` | `-` | | `to` | `ReactNode` | `-` | | `transitionStart` | `number` | `36` | | `transitionDuration` | `number` | `30` | | `glassBlur` | `number` | `24` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `background` | `string` | `"black"` | | `className` | `string` | `-` | ## Notes The frosted glass effect uses CSS backdrop-filter for the blur. Browser support is good but not universal. # Grid Pixelate Wipe Dissolve from one scene to the next through a deterministic grid of mask cells. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/grid-pixelate-wipe ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { GridPixelateWipe } from "@/components/framecn/grid-pixelate-wipe"; ``` ```tsx ``` ## API Reference ### GridPixelateWipe | Prop | Type | Default | | -------------------- | ---------------------------------- | --------- | | `from` | `React.ReactNode` | `-` | | `to` | `React.ReactNode` | `-` | | `cols` | `number` | `12` | | `rows` | `number` | `7` | | `pattern` | `"wave" \| "diagonal" \| "spiral"` | `"wave"` | | `transitionStart` | `number` | `36` | | `transitionDuration` | `number` | `30` | | `cellFadeFrames` | `number` | `4` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `background` | `string` | `"black"` | | `className` | `string` | `-` | ## Notes Grid cells reveal in a deterministic pattern. Cell timing is based on distance from center for a natural dissolve effect. # Transitions Scene transitions, camera moves, and stylized wipes. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). # Kinetic Type Mask Use giant typography as a window into the next scene. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/kinetic-type-mask ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { KineticTypeMask } from "@/components/framecn/kinetic-type-mask"; ``` ```tsx ``` ## API Reference ### KineticTypeMask | Prop | Type | Default | | -------------------- | ----------- | -------- | | `from` | `ReactNode` | `-` | | `to` | `ReactNode` | `-` | | `text` | `string` | `"NEXT"` | | `transitionStart` | `number` | `-` | | `holdFrames` | `number` | `12` | | `transitionDuration` | `number` | `24` | | `maxScale` | `number` | `120` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes Giant text acts as a window into the next scene. The text clips the revealing scene, creating an interesting reveal effect. # Morphing Modal Card lifts off a grid and expands into a full-screen modal. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/morphing-modal ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { MorphingModal } from "@/components/framecn/morphing-modal"; ``` ```tsx ``` ## API Reference ### MorphingModal | Prop | Type | Default | | ------------------ | ------------------- | -------------- | | `from` | `MorphingModalRect` | `DEFAULT_FROM` | | `to` | `MorphingModalRect` | `DEFAULT_TO` | | `borderRadiusFrom` | `number` | `24` | | `borderRadiusTo` | `number` | `0` | | `morphAt` | `number` | `30` | | `background` | `string` | `"#050505"` | | `cardColor` | `string` | `"#0a0a0a"` | | `textColor` | `string` | `"#fafafa"` | | `mutedColor` | `string` | `"#71717a"` | | `source` | `ReactNode` | `-` | | `modal` | `ReactNode` | `-` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `180` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes The modal uses state to control the expansion animation. The card lifts off the grid and expands to full screen with a spring animation. # Per Word Crossfade Words exit one by one, then new words enter word by word with a slight stagger. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/per-word-crossfade ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { PerWordCrossfade } from "@/components/framecn/per-word-crossfade"; ``` ```tsx ``` ## API Reference ### PerWordCrossfade | Prop | Type | Default | | ------------------ | -------- | --------------- | | `fromText` | `string` | `"Hello world"` | | `toText` | `string` | `"New world"` | | `fontSize` | `number` | `72` | | `color` | `string` | `"#171717"` | | `fontWeight` | `number` | `600` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ## Notes Each word in the exit phrase fades out separately, followed by each word in the entry phrase fading in. The enter sequence overlaps slightly with the tail end of the exit for a more fluid feel. # Shared Axis Y A snappy word-by-word opacity flip using stepped easing for a punchy snap effect. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/shared-axis-y ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { SharedAxisY } from "@/components/framecn/shared-axis-y"; ``` ```tsx ``` ## API Reference ### SharedAxisY | Prop | Type | Default | | ------------------ | -------- | --------------- | | `fromText` | `string` | `"Hello world"` | | `toText` | `string` | `"New world"` | | `fontSize` | `number` | `72` | | `color` | `string` | `"#171717"` | | `fontWeight` | `number` | `600` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ## Notes Uses `steps(1)` easing so each word snaps on/off rather than fading. This creates a sharp, frame-accurate digital feel well suited to fast-cut edits and lower-thirds. # Shared Axis Z Text scales up and fades out while new text scales in from small, simulating depth on the Z axis. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/shared-axis-z ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { SharedAxisZ } from "@/components/framecn/shared-axis-z"; ``` ```tsx ``` ## API Reference ### SharedAxisZ | Prop | Type | Default | | ------------------ | -------- | --------------- | | `fromText` | `string` | `"Hello world"` | | `toText` | `string` | `"New world"` | | `fontSize` | `number` | `72` | | `color` | `string` | `"#171717"` | | `fontWeight` | `number` | `600` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ## Notes The exiting text scales up slightly while blurring out, and the entering text scales in from 90% while unblurring. The two animations overlap by two frames for a seamless handoff. # Spatial Push A new scene physically presses the old one back into the frame. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/spatial-push ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { SpatialPush } from "@/components/framecn/spatial-push"; ``` ```tsx ``` ## API Reference ### SpatialPush | Prop | Type | Default | | -------------------- | ------------------------------------- | ------- | | `from` | `ReactNode` | `-` | | `to` | `ReactNode` | `-` | | `direction` | `"up" \| "down" \| "left" \| "right"` | `"up"` | | `transitionStart` | `number` | `-` | | `transitionDuration` | `number` | `30` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ## Notes The old scene is pushed back in 3D space while the next scene slides in from the chosen `direction`. Use `transitionDuration` to control how long the push phase takes. # Swipe Transition Wipe Quick swipe transition between scenes. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/swipe-transition-wipe ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { SwipeTransitionWipe } from "@/components/framecn/swipe-transition-wipe"; ``` ```tsx ``` ## API Reference ### SwipeTransitionWipe | Prop | Type | Default | | ------------------ | ------------------- | ----------- | | `sceneA` | `ReactNode` | `-` | | `sceneB` | `ReactNode` | `-` | | `labelA` | `string` | `"First"` | | `labelB` | `string` | `"Second"` | | `colorA1` | `string` | `"#0ea5e9"` | | `colorA2` | `string` | `"#1e3a8a"` | | `colorB1` | `string` | `"#f97316"` | | `colorB2` | `string` | `"#9333ea"` | | `background` | `string` | `"#050505"` | | `direction` | `"left" \| "right"` | `"left"` | | `swipeAt` | `number` | `30` | | `parallaxFactor` | `number` | `0.6` | | `dimStrength` | `number` | `0.4` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ## Notes The transition uses a quick swipe in the specified direction. Duration is typically shorter for a snappier feel. # Zoom Through Transition Aggressive scale-in through an element to the next scene. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/zoom-through-transition ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ZoomThroughTransition } from "@/components/framecn/zoom-through-transition"; ``` ```tsx ``` ## API Reference ### ZoomThroughTransition | Prop | Type | Default | | ------------------ | ----------- | ----------------- | | `children` | `ReactNode` | `-` | | `targetScale` | `number` | `20` | | `transformOrigin` | `string` | `"center center"` | | `background` | `string` | `"white"` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ## Notes The transition scales through a given element to create an aggressive zoom effect. Higher scale values create more dramatic transitions. # Backdrop A layout wrapper with configurable background fill, padding, and border radius. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/backdrop ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { Backdrop } from "@/components/framecn/backdrop"; ``` ```tsx ``` ## API Reference ### Backdrop | Prop | Type | Default | | ------------------ | -------------- | ----------------------------------------------------- | | `background` | `string` | `"linear-gradient(135deg, #667eea 0%, #764ba2 100%)"` | | `fill` | `BackdropFill` | `-` | | `padding` | `number` | `10` | | `radius` | `number` | `4` | | `shadow` | `string` | `-` | | `children` | `ReactNode` | `-` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ### BackdropFill ```ts type BackdropFill = | { type: "color"; value: string } | { type: "gradient"; value: string } | { type: "image"; src: string; fit?: "cover" | "contain" }; ``` ## Notes The `background` prop accepts any CSS background string (colors, gradients, etc.) and is used when no `fill` is provided. For image fills or more precise control, pass a typed `fill` object instead. `padding` and `radius` are expressed as percentages of the composition dimensions. # Bounding Box Selector Figma-style selection rectangle that snaps around a target. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/bounding-box-selector ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { BoundingBoxSelector } from "@/components/framecn/bounding-box-selector"; ``` ```tsx ``` ## API Reference ### BoundingBoxSelector | Prop | Type | Default | | ------------------ | ----------- | ----------- | | `children` | `ReactNode` | `-` | | `borderColor` | `string` | `"#0ea5e9"` | | `handleColor` | `string` | `"#0ea5e9"` | | `borderWidth` | `number` | `2` | | `appearAt` | `number` | `15` | | `background` | `string` | `"#fafafa"` | | `speed` | `number` | `1` | | `className` | `string` | `-` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `width` | `number` | `1000` | | `height` | `number` | `500` | ## Notes The component reads its size from the wrapped child via `display: inline-block`. Pass children with explicit `width`/`height` for pixel-perfect placement. # Confetti Deterministic particle burst with configurable power, gravity, and seed. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/confetti ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { Confetti } from "@/components/framecn/confetti"; ``` ```tsx ``` ## API Reference ### Confetti | Prop | Type | Default | | ------------------ | ---------- | --------------------------------------------------------------- | | `particleCount` | `number` | `80` | | `originX` | `number` | `0.5` | | `originY` | `number` | `0.5` | | `lifetime` | `number` | `90` | | `power` | `number` | `17` | | `gravity` | `number` | `0.45` | | `size` | `number` | `13` | | `seed` | `number` | `1` | | `colors` | `string[]` | `["#1d9bf0","#ff5da2","#ffd23f","#22c55e","#a855f7","#ff7a45"]` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `180` | | `className` | `string` | `-` | ## Notes Particle positions, angles, and sizes are generated from a mulberry32 PRNG seeded by the `seed` prop. Changing `seed` produces a completely different burst pattern while remaining frame-for-frame reproducible on every render. # Cursor Flow Realistic mouse that arcs along Bezier paths and clicks targets. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/cursor-flow ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { CursorFlow } from "@/components/framecn/cursor-flow"; ``` ```tsx ``` ## API Reference ### CursorFlow | Prop | Type | Default | | ------------------ | ------------------ | ------------------- | | `waypoints` | `CursorWaypoint[]` | `DEFAULT_WAYPOINTS` | | `cursorColor` | `string` | `"#fafafa"` | | `cursorSize` | `number` | `28` | | `segmentDuration` | `number` | `36` | | `background` | `string` | `"#0a0a0a"` | | `showTargets` | `boolean` | `true` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `180` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes The cursor follows per-segment cubic Bezier curves with perpendicular control points. The arc creates natural, realistic movement. Curves are computed inline to avoid pulling in external dependencies. Path math is handled internally. # Core Primitives Foundational micro-interactions and reusable building blocks. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). # Logo Enter A row or column of overlapping logo circles that spring in one by one. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/logo-enter ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { LogoEnter } from "@/components/framecn/logo-enter"; ``` ```tsx ``` ## API Reference ### LogoEnter | Prop | Type | Default | | ------------------ | ---------------------------- | -------------- | | `diameter` | `number` | `118` | | `overlap` | `number` | `38` | | `ringColor` | `string` | `"#ffffff"` | | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | | `stagger` | `number` | `7` | | `background` | `string` | `"#0a0a0a"` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes Each logo circle uses a `cubic-bezier(0.34, 1.56, 0.64, 1)` spring curve that produces a natural overshoot before settling. Increase `stagger` to widen the delay between each logo's entrance. # Pulsing Indicator Continuous sine-driven pulse for loading or activity states. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/pulsing-indicator ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { PulsingIndicator } from "@/components/framecn/pulsing-indicator"; ``` ```tsx ``` ## API Reference ### PulsingIndicator | Prop | Type | Default | | ------------------ | -------- | ----------- | | `color` | `string` | `"#22c55e"` | | `size` | `number` | `16` | | `period` | `number` | `8` | | `speed` | `number` | `1` | | `background` | `string` | `"white"` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ## Notes The indicator uses a continuous sine wave for smooth pulsing. The duration controls the period of one pulse cycle. # Simulated Cursor A simulated cursor with click animations and movement. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/simulated-cursor ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { SimulatedCursor } from "@/components/framecn/simulated-cursor"; ``` ```tsx ``` ## API Reference ### SimulatedCursor | Prop | Type | Default | | ------------------ | --------------- | ---------------- | | `points` | `CursorPoint[]` | `DEFAULT_POINTS` | | `color` | `string` | `"#ffffff"` | | `size` | `number` | `32` | | `background` | `string` | `"#0a0a0a"` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `150` | | `className` | `string` | `-` | ## Notes The cursor is drawn as inline SVG, so you don't need to copy anything into `public/`. Drop the component into any composition and it just works. # Spring Pop In Elastic scale pop with configurable overshoot. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/spring-pop-in ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { SpringPopIn } from "@/components/framecn/spring-pop-in"; ``` ```tsx ``` ## API Reference ### SpringPopIn | Prop | Type | Default | | ------------------ | ----------- | ------- | | `children` | `ReactNode` | `-` | | `damping` | `number` | `12` | | `mass` | `number` | `1` | | `stiffness` | `number` | `100` | | `delayInFrames` | `number` | `0` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `45` | | `className` | `string` | `-` | ## Notes The animation uses a spring function with configurable overshoot. Tune `stiffness`, `damping`, and `mass` to shape how far it overshoots before settling. # Success Confetti Deterministic particle burst from a chosen origin point. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/success-confetti ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { SuccessConfetti } from "@/components/framecn/success-confetti"; ``` ```tsx ``` ## API Reference ### SuccessConfetti | Prop | Type | Default | | ------------------ | ---------- | --------------------------------------------------------- | | `count` | `number` | `60` | | `colors` | `string[]` | `["#ff5e3a", "#22c55e", "#0ea5e9", "#facc15", "#a855f7"]` | | `originX` | `number` | `0.5` | | `originY` | `number` | `0.5` | | `gravity` | `number` | `0.4` | | `velocity` | `number` | `12` | | `text` | `string` | `"Merged!"` | | `textColor` | `string` | `"#171717"` | | `background` | `string` | `"#fafafa"` | | `seed` | `string` | `"framecn"` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ## Notes The confetti uses deterministic physics with seeded random values. Same inputs always produce the same particle patterns. Higher particle counts may impact performance. Keep particleCount under 100 for smooth animations. # Toast Notification System toast that springs in, holds, and slides away. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/toast-notification ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ToastNotification } from "@/components/framecn/toast-notification"; ``` ```tsx ``` ## API Reference ### ToastNotification | Prop | Type | Default | | ------------------ | -------------- | ---------------------------------------- | | `title` | `string` | `"Deployment successful"` | | `message` | `string` | `"Your changes are live at framecn.dev"` | | `variant` | `ToastVariant` | `"success"` | | `background` | `string` | `"#fafafa"` | | `cardColor` | `string` | `"white"` | | `textColor` | `string` | `"#171717"` | | `mutedColor` | `string` | `"#71717a"` | | `speed` | `number` | `1` | | `fps` | `number` | `FPS` | | `durationInFrames` | `number` | `DURATION_IN_FRAMES` | | `className` | `string` | `-` | ## Notes The toast animates through three phases: spring-based enter, a hold period, and interpolate-based exit. Use `durationInFrames` to control the overall timing. The toast is positioned absolutely at the bottom-right of the frame. Ensure the parent has a defined size for correct placement. # Animated Bar Chart Bars spring up from the baseline with deterministic stagger. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/animated-bar-chart ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { AnimatedBarChart } from "@/components/framecn/animated-bar-chart"; ``` ```tsx ``` ## API Reference ### AnimatedBarChart | Prop | Type | Default | | ------------------ | ---------- | ---------------------------------- | | `data` | `number[]` | `[35, 60, 45, 80, 55, 70, 90, 65]` | | `labels` | `string[]` | `-` | | `width` | `number` | `1000` | | `height` | `number` | `500` | | `barColor` | `string` | `"#0ea5e9"` | | `background` | `string` | `"#0a0a0a"` | | `gap` | `number` | `16` | | `staggerFrames` | `number` | `6` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ## Notes Bars spring up from the baseline with deterministic stagger. Great for dashboard or analytics visualizations. # Animated Line Chart SVG line chart drawn left-to-right via stroke-dashoffset. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/animated-line-chart ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { AnimatedLineChart } from "@/components/framecn/animated-line-chart"; ``` ```tsx ``` ## API Reference ### AnimatedLineChart | Prop | Type | Default | | ------------------ | ---------- | ------------------------------------- | | `data` | `number[]` | `[12, 19, 8, 15, 22, 18, 28, 25, 32]` | | `width` | `number` | `1000` | | `height` | `number` | `500` | | `strokeColor` | `string` | `"#22c55e"` | | `strokeWidth` | `number` | `4` | | `background` | `string` | `"#0a0a0a"` | | `gridColor` | `string` | `"#27272a"` | | `showDot` | `boolean` | `true` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ## Notes The chart line is drawn using stroke-dashoffset animation for a smooth left-to-right reveal effect. # Chat To Preview Layout Chat input transforms into a preview layout. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/chat-to-preview-layout ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ChatToPreviewLayout } from "@/components/framecn/chat-to-preview-layout"; ``` ```tsx ``` ## API Reference ### ChatToPreviewLayout | Prop | Type | Default | | ------------------ | ----------- | ----------- | | `chat` | `ReactNode` | `-` | | `preview` | `ReactNode` | `-` | | `startChatRatio` | `number` | `0.5` | | `endChatRatio` | `number` | `0.25` | | `background` | `string` | `"#0a0a0a"` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `150` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | # Code Accordion Long code blocks collapse mid-section, hiding noise behind a count badge. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/code-accordion ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { CodeAccordion } from "@/components/framecn/code-accordion"; ``` ```tsx ``` ## API Reference ### CodeAccordion | Prop | Type | Default | | ------------------ | ------------------ | --------------------- | | `lines` | `string[]` | `DEFAULT_LINES` | | `collapseRange` | `[number, number]` | `[3, 14]` | | `collapseAt` | `number` | `30` | | `title` | `string` | `"process-orders.ts"` | | `fontSize` | `number` | `16` | | `width` | `number` | `720` | | `background` | `string` | `"#050505"` | | `cardColor` | `string` | `"#0a0a0a"` | | `textColor` | `string` | `"#e4e4e7"` | | `mutedColor` | `string` | `"#52525b"` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `150` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes Long code blocks collapse in the middle with a line count badge. Click to expand and see the full code. # Code Diff Wipe Before/after comparison with a clip-path slider revealing the new code. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/code-diff-wipe ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { CodeDiffWipe } from "@/components/framecn/code-diff-wipe"; ``` ```tsx ``` ## API Reference ### CodeDiffWipe | Prop | Type | Default | | -------------------- | --------- | ---------------- | | `before` | `string` | `DEFAULT_BEFORE` | | `after` | `string` | `DEFAULT_AFTER` | | `language` | `string` | `"tsx"` | | `background` | `string` | `"#0a0a0a"` | | `accent` | `string` | `"#0ea5e9"` | | `transitionStart` | `number` | `20` | | `transitionDuration` | `number` | `60` | | `showHandle` | `boolean` | `true` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `120` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes A clip-path slider reveals new code over old code. Great for showing code changes or refactoring diffs. # Data Flow Pipes Glowing data packets fly along SVG pipes with trailing tails. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/data-flow-pipes ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { DataFlowPipes } from "@/components/framecn/data-flow-pipes"; ``` ```tsx ``` ## API Reference ### DataFlowPipes | Prop | Type | Default | | ------------------ | ---------------- | --------------- | | `nodes` | `DataFlowNode[]` | `DEFAULT_NODES` | | `edges` | `DataFlowEdge[]` | `DEFAULT_EDGES` | | `pipeColor` | `string` | `"#1f1f23"` | | `pulseColor` | `string` | `"#22d3ee"` | | `pulseLength` | `number` | `60` | | `pulseDuration` | `number` | `36` | | `background` | `string` | `"#050505"` | | `nodeColor` | `string` | `"#0a0a0a"` | | `textColor` | `string` | `"#fafafa"` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `180` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes Data packets with trailing tails fly along SVG pipe paths. Great for showing data pipelines or API flows. # Drag And Drop Flow Cursor drags a file into a drop zone that lights up and starts a progress bar. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/drag-and-drop-flow ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { DragAndDropFlow } from "@/components/framecn/drag-and-drop-flow"; ``` ```tsx ``` ## API Reference ### DragAndDropFlow | Prop | Type | Default | | ------------------ | -------- | ----------------------- | | `accent` | `string` | `"#0ea5e9"` | | `dropzoneLabel` | `string` | `"Drop file to upload"` | | `fileName` | `string` | `"design.fig"` | | `background` | `string` | `"#fafafa"` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `150` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes A cursor drags a file into a drop zone that lights up and shows a progress bar. Great for file upload UI demos. # Glass Code Block Premium frosted-glass code window with rim light and traffic-light controls. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/glass-code-block ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { GlassCodeBlock } from "@/components/framecn/glass-code-block"; ``` ```tsx ``` ## API Reference ### GlassCodeBlock | Prop | Type | Default | | ------------------- | --------- | ------------------------- | | `code` | `string` | `DEFAULT_CODE` | | `title` | `string` | `"hero.tsx"` | | `width` | `number` | `760` | | `height` | `number` | `460` | | `fontSize` | `number` | `16` | | `background` | `string` | `"#0a0a0a"` | | `glassColor` | `string` | `"rgba(10, 10, 10, 0.6)"` | | `staggerFrames` | `number` | `4` | | `showTrafficLights` | `boolean` | `true` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `180` | | `className` | `string` | `-` | ## Notes A frosted-glass code window with rim lighting and macOS-style traffic light controls. Great for premium landing pages. # UI Blocks Pre-assembled interface elements — code editors, layouts, charts, and workflow visualizations. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). # Progress Steps Multi-step pipeline visualization with line fill and pulsing dots. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/progress-steps ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ProgressSteps } from "@/components/framecn/progress-steps"; ``` ```tsx ``` ## API Reference ### ProgressSteps | Prop | Type | Default | | ------------------ | ---------------------------- | ------------------------------------------------------------------- | | `steps` | `{ label: string }[]` | `[{ label: "Connect" }, { label: "Process" }, { label: "Deploy" }]` | | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | | `activeColor` | `string` | `"#22c55e"` | | `inactiveColor` | `string` | `"#27272a"` | | `background` | `string` | `"#0a0a0a"` | | `textColor` | `string` | `"white"` | | `stepDuration` | `number` | `30` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `150` | | `width` | `number` | `1000` | | `height` | `number` | `500` | | `className` | `string` | `-` | ## Notes Steps show as connected dots with a line fill to the current step. Great for wizard or pipeline UI. # Staggered Bento Grid Bento grid where cards cascade in with per-cell sequences. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/staggered-bento-grid ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { StaggeredBentoGrid } from "@/components/framecn/staggered-bento-grid"; ``` ```tsx ``` ## API Reference ### StaggeredBentoGrid | Prop | Type | Default | | ------------------ | ------------- | --------------- | | `items` | `BentoItem[]` | `DEFAULT_ITEMS` | | `staggerDelay` | `number` | `8` | | `columns` | `number` | `3` | | `background` | `string` | `"#0a0a0a"` | | `cardColor` | `string` | `"#1a1a1a"` | | `textColor` | `string` | `"white"` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ## Notes Cards cascade in with staggered timing. Each cell has its own animation sequence for a dynamic entrance effect. # Terminal Simulator CLI build simulation with chunked log output and step-function scrolling. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/terminal-simulator ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { TerminalSimulator } from "@/components/framecn/terminal-simulator"; ``` ```tsx ``` ## API Reference ### TerminalSimulator | Prop | Type | Default | | ------------------ | ---------------- | ---------------------- | | `lines` | `TerminalLine[]` | `DEFAULT_LINES` | | `prompt` | `string` | `"$"` | | `title` | `string` | `"~/projects/framecn"` | | `background` | `string` | `"#0a0a0a"` | | `chromeColor` | `string` | `"#1a1a1a"` | | `fontSize` | `number` | `18` | | `charsPerFrame` | `number` | `1` | | `chunkSize` | `number` | `1` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `200` | | `className` | `string` | `-` | ## Notes Commands type out character-by-character with chunked log output. The terminal auto-scrolls as new content appears. # Blur Out Up Words blur and drift upward on exit, with a smooth fade-in entrance. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/blur-out-up ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { BlurOutUp } from "@/components/framecn/blur-out-up"; ``` ```tsx ``` ## API Reference ### BlurOutUp | Prop | Type | Default | | ------------------ | -------- | ----------------------- | | `text` | `string` | `"Words fade and blur"` | | `staggerDelay` | `number` | `4` | | `fontSize` | `number` | `72` | | `color` | `string` | `"#171717"` | | `fontWeight` | `number` | `600` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ## Notes Each word enters with a blur fade-in and exits with a blur drift upward. The `staggerDelay` prop (in frames) controls the cascade timing between words. # Blur Reveal Text fades in from a heavy blur into sharp focus. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/blur-reveal ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { BlurReveal } from "@/components/framecn/blur-reveal"; ``` ```tsx ``` ## API Reference ### BlurReveal | Prop | Type | Default | | ------------------ | -------- | -------------- | | `text` | `string` | `"BlurReveal"` | | `className` | `string` | `-` | | `blur` | `number` | `10` | | `fontSize` | `number` | `48` | | `color` | `string` | `"#171717"` | | `fontWeight` | `number` | `600` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `width` | `number` | `1000` | | `height` | `number` | `500` | | `background` | `string` | `"white"` | ## Notes The blur effect uses CSS backdrop-filter which may not be supported in all browsers. Consider providing a fallback for older browsers. # Bottom Up Letters Each letter rises from below with a staggered fade-in cascade. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/bottom-up-letters ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { BottomUpLetters } from "@/components/framecn/bottom-up-letters"; ``` ```tsx ``` ## API Reference ### BottomUpLetters | Prop | Type | Default | | ------------------ | -------- | --------------- | | `text` | `string` | `"Hello world"` | | `staggerDelay` | `number` | `3` | | `distance` | `number` | `46` | | `fontSize` | `number` | `72` | | `color` | `string` | `"#171717"` | | `fontWeight` | `number` | `600` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ## Notes Text is split into individual characters. Spaces are preserved using `white-space: pre`. The `distance` prop controls how far below each letter starts before rising into place. # Focus Blur Resolve Text resolves into focus from a blurred, shifted state, then blurs back out on exit. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/focus-blur-resolve ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { FocusBlurResolve } from "@/components/framecn/focus-blur-resolve"; ``` ```tsx ``` ## API Reference ### FocusBlurResolve | Prop | Type | Default | | ------------------ | -------- | ---------------------- | | `text` | `string` | `"Focus blur resolve"` | | `blur` | `number` | `14` | | `fontSize` | `number` | `72` | | `color` | `string` | `"#171717"` | | `fontWeight` | `number` | `600` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ## Notes The `blur` prop is embedded directly in the CSS keyframe name to ensure unique keyframe definitions when multiple instances with different blur values render on the same page. # Typography Text effects, reveals, and kinetic type for your videos. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). # Infinite Marquee Endlessly scrolling horizontal text band. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/infinite-marquee ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { InfiniteMarquee } from "@/components/framecn/infinite-marquee"; ``` ```tsx ``` ## API Reference ### InfiniteMarquee | Prop | Type | Default | | ------------------ | --------- | ----------------------------- | | `text` | `string` | `"ship · build · animate · "` | | `fontSize` | `number` | `120` | | `color` | `string` | `"#171717"` | | `fontWeight` | `number` | `900` | | `pixelsPerFrame` | `number` | `4` | | `stroke` | `boolean` | `false` | | `strokeColor` | `string` | `"#171717"` | | `background` | `string` | `"#fafafa"` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `300` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes The marquee uses CSS transforms for smooth scrolling. The text is duplicated to create the infinite loop effect. The marquee calculates width based on initial render. If the container resizes, you may need to force a re-render. # Inline Highlight Animates one word inside a sentence from a base color to a brand color. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/inline-highlight ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { InlineHighlight } from "@/components/framecn/inline-highlight"; ``` ```tsx ``` ## API Reference ### InlineHighlight | Prop | Type | Default | | ------------------ | -------- | ----------- | | `before` | `string` | `-` | | `highlight` | `string` | `-` | | `after` | `string` | `""` | | `baseColor` | `string` | `"#171717"` | | `highlightColor` | `string` | `"#ff5e3a"` | | `fontSize` | `number` | `48` | | `fontWeight` | `number` | `600` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ## Notes Pass an array of word indices to `highlightWords` to animate multiple words. The animation sequences through each word in the array. # Line by Line Slide Multi-line text slides in from the left line by line, then slides out to the right. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/line-by-line-slide ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { LineByLineSlide } from "@/components/framecn/line-by-line-slide"; ``` ```tsx ``` ## API Reference ### LineByLineSlide | Prop | Type | Default | | ------------------ | -------- | --------------------------- | | `text` | `string` | `"First line\nSecond line"` | | `distance` | `number` | `48` | | `fontSize` | `number` | `72` | | `color` | `string` | `"#171717"` | | `fontWeight` | `number` | `600` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ## Notes Split your text with `\n` to define each line. Lines slide in with a cascading stagger and exit in the same order. # Marker Highlight Marker bar sweeps in behind a phrase, optionally inverting the text color. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/marker-highlight ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { MarkerHighlight } from "@/components/framecn/marker-highlight"; ``` ```tsx ``` ## API Reference ### MarkerHighlight | Prop | Type | Default | | ---------------------- | -------- | ------------ | | `before` | `string` | `""` | | `highlight` | `string` | `"builders"` | | `after` | `string` | `"."` | | `markerColor` | `string` | `"#facc15"` | | `baseColor` | `string` | `"#171717"` | | `highlightedTextColor` | `string` | `"#171717"` | | `fontSize` | `number` | `72` | | `fontWeight` | `number` | `600` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes The marker bar is positioned absolutely behind the text. Ensure the parent has `position: relative` for correct placement. When `invertText` is true, the text color inverts. Ensure your marker color has sufficient contrast with the background. # Mask Reveal Up Lines rise up from below through a blur, then exit upward with a blur on each line. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/mask-reveal-up ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { MaskRevealUp } from "@/components/framecn/mask-reveal-up"; ``` ```tsx ``` ## API Reference ### MaskRevealUp | Prop | Type | Default | | ------------------ | -------- | --------------------------- | | `text` | `string` | `"First line\nSecond line"` | | `distance` | `number` | `30` | | `fontSize` | `number` | `72` | | `color` | `string` | `"#171717"` | | `fontWeight` | `number` | `600` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ## Notes Split your text with `\n` to define each line. Lines reveal with a staggered cascade and exit in the same order with blur transitions. # Masked Slide Reveal Lines grow out from behind an invisible horizontal mask. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/masked-slide-reveal ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { MaskedSlideReveal } from "@/components/framecn/masked-slide-reveal"; ``` ```tsx ``` ## API Reference ### MaskedSlideReveal | Prop | Type | Default | | ------------------ | -------- | ----------------------- | | `text` | `string` | `"Ship to production."` | | `staggerDelay` | `number` | `3` | | `fontSize` | `number` | `72` | | `color` | `string` | `"#171717"` | | `fontWeight` | `number` | `700` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes The masked reveal uses CSS clip-path. The mask expands horizontally to reveal the text underneath. # Matrix Decode Random characters scramble and resolve into the target string. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/matrix-decode ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { MatrixDecode } from "@/components/framecn/matrix-decode"; ``` ```tsx ``` ## API Reference ### MatrixDecode | Prop | Type | Default | | ------------------ | -------- | ------------------------ | --- | | `text` | `string` | `"DECRYPTED"` | | `charset` | `string` | `"!@#$%^&\*()\_+-=<>?/\\ | "` | | `fontSize` | `number` | `72` | | `color` | `string` | `"#22c55e"` | | `fontWeight` | `number` | `600` | | `revealDuration` | `number` | `60` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes The decode effect uses random characters from a Matrix-style character set that gradually resolve to the target text. Longer texts take more time to fully resolve. # Micro Scale Fade The entire text scales in from a subtle size with a smooth fade, perfect for clean entrances. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/micro-scale-fade ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { MicroScaleFade } from "@/components/framecn/micro-scale-fade"; ``` ```tsx ``` ## API Reference ### MicroScaleFade | Prop | Type | Default | | ------------------ | -------- | ----------------- | | `text` | `string` | `"Scale fade in"` | | `scaleFrom` | `number` | `0.96` | | `fontSize` | `number` | `72` | | `color` | `string` | `"#171717"` | | `fontWeight` | `number` | `600` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ## Notes Unlike character-stagger components, `MicroScaleFade` animates the entire text as one element. A subtle `scaleFrom` value near `1.0` (like the default `0.96`) creates an elegant entrance without feeling exaggerated. # Per Character Rise Characters rise from below with a smooth spring-like easing, staggered one frame apart. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/per-character-rise ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { PerCharacterRise } from "@/components/framecn/per-character-rise"; ``` ```tsx ``` ## API Reference ### PerCharacterRise | Prop | Type | Default | | ------------------ | -------- | ------------------- | | `text` | `string` | `"Rise up letters"` | | `distance` | `number` | `32` | | `fontSize` | `number` | `72` | | `color` | `string` | `"#171717"` | | `fontWeight` | `number` | `600` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ## Notes The stagger between characters is fixed at 1 frame for a tight, fluid cascade. Use the `speed` prop to adjust the overall pace of the animation. # Perspective Marquee Marquee tilted into 3D space with depth fade. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/perspective-marquee ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { PerspectiveMarquee } from "@/components/framecn/perspective-marquee"; ``` ```tsx ``` ## API Reference ### PerspectiveMarquee | Prop | Type | Default | | ------------------ | ---------- | --------------- | | `items` | `string[]` | `DEFAULT_ITEMS` | | `fontSize` | `number` | `84` | | `color` | `string` | `"#fafafa"` | | `fontWeight` | `number` | `700` | | `pixelsPerFrame` | `number` | `2` | | `rotateY` | `number` | `-28` | | `rotateX` | `number` | `8` | | `perspective` | `number` | `1200` | | `fadeColor` | `string` | `"#050505"` | | `background` | `string` | `"#050505"` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `300` | | `width` | `number` | `1280` | | `height` | `number` | `720` | | `className` | `string` | `-` | ## Notes The marquee uses CSS perspective and transform3D for the 3D effect. Text fades in opacity as it moves deeper into the scene. # RGB Glitch Text Three-channel RGB split with a brief horizontal jitter. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/rgb-glitch-text ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { RGBGlitchText } from "@/components/framecn/rgb-glitch-text"; ``` ```tsx ``` ## API Reference ### RGBGlitchText | Prop | Type | Default | | ------------------ | -------- | ----------- | | `text` | `string` | `-` | | `fontSize` | `number` | `96` | | `color` | `string` | `"#171717"` | | `fontWeight` | `number` | `700` | | `glitchAt` | `number` | `20` | | `glitchDuration` | `number` | `8` | | `intensity` | `number` | `6` | | `seed` | `string` | `"glitch"` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `60` | | `className` | `string` | `-` | ## Notes The text renders three offset channels (red, green, blue) with randomized horizontal jitter. The intensity controls the offset amount. # Scale Down Fade Text enters scaling down into place with a fade, then shrinks and fades out. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/scale-down-fade ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ScaleDownFade } from "@/components/framecn/scale-down-fade"; ``` ```tsx ``` ## API Reference ### ScaleDownFade | Prop | Type | Default | | ------------------ | -------- | ------------------- | | `text` | `string` | `"Scale down fade"` | | `fontSize` | `number` | `72` | | `color` | `string` | `"#171717"` | | `fontWeight` | `number` | `600` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | # Shimmer Sweep Bright gradient sweeps across dim text, lighting it up. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/shimmer-sweep ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ShimmerSweep } from "@/components/framecn/shimmer-sweep"; ``` ```tsx ``` ## API Reference ### ShimmerSweep | Prop | Type | Default | | ------------------ | -------- | ----------- | | `text` | `string` | `-` | | `baseColor` | `string` | `"#3f3f46"` | | `shineColor` | `string` | `"#fafafa"` | | `fontSize` | `number` | `96` | | `fontWeight` | `number` | `700` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ## Notes The shimmer effect sweeps from left to right. You can reverse this by swapping the gradient colors or using a custom gradient direction. # Short Slide Right The text group slides in from the left while individual words fade in with a stagger. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/short-slide-right ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ShortSlideRight } from "@/components/framecn/short-slide-right"; ``` ```tsx ``` ## API Reference ### ShortSlideRight | Prop | Type | Default | | ------------------ | -------- | --------------------- | | `text` | `string` | `"Short slide right"` | | `distance` | `number` | `24` | | `staggerDelay` | `number` | `3` | | `fontSize` | `number` | `72` | | `color` | `string` | `"#171717"` | | `fontWeight` | `number` | `600` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ## Notes The outer container slides as a unit while each word independently fades in with a cascading delay, creating a combined motion that feels natural and composed. # Slot Machine Roll Numbers and characters roll into place like a casino reel. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/slot-machine-roll ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { SlotMachineRoll } from "@/components/framecn/slot-machine-roll"; ``` ```tsx ``` ## API Reference ### SlotMachineRoll | Prop | Type | Default | | ------------------ | -------- | ----------- | | `from` | `string` | `"$99"` | | `to` | `string` | `"$199"` | | `fontSize` | `number` | `120` | | `color` | `string` | `"#171717"` | | `fontWeight` | `number` | `700` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `45` | | `className` | `string` | `-` | ## Notes Characters roll in sequence with slight delays between each roll. The duration controls how long each character takes to settle. # Soft Blur In Characters fade in through a soft blur and upward drift, staggered one frame apart. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/soft-blur-in ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { SoftBlurIn } from "@/components/framecn/soft-blur-in"; ``` ```tsx ``` ## API Reference ### SoftBlurIn | Prop | Type | Default | | ------------------ | -------- | --------------------- | | `text` | `string` | `"Soft blur letters"` | | `blur` | `number` | `12` | | `fontSize` | `number` | `72` | | `color` | `string` | `"#171717"` | | `fontWeight` | `number` | `600` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ## Notes The `blur` prop directly controls the starting blur amount. Each blur value generates a uniquely named keyframe, so multiple instances with different blur values can coexist on the same page without conflict. # Spring Scale In Words pop in one by one with an overshoot spring scale effect. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/spring-scale-in ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { SpringScaleIn } from "@/components/framecn/spring-scale-in"; ``` ```tsx ``` ## API Reference ### SpringScaleIn | Prop | Type | Default | | ------------------ | -------- | ------------------- | | `text` | `string` | `"Spring scale in"` | | `staggerDelay` | `number` | `3` | | `scaleFrom` | `number` | `0.7` | | `fontSize` | `number` | `72` | | `color` | `string` | `"#171717"` | | `fontWeight` | `number` | `600` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ## Notes The animation uses `cubic-bezier(0.34, 1.56, 0.64, 1)` which produces a natural overshoot past scale 1 before settling, giving each word a satisfying pop-in feel. # Staggered Fade Up Words rise from below with a soft cascading delay. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/staggered-fade-up ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { StaggeredFadeUp } from "@/components/framecn/staggered-fade-up"; ``` ```tsx ``` ## API Reference ### StaggeredFadeUp | Prop | Type | Default | | ------------------ | -------- | ----------- | | `text` | `string` | `-` | | `staggerDelay` | `number` | `4` | | `distance` | `number` | `20` | | `fontSize` | `number` | `72` | | `color` | `string` | `"#171717"` | | `fontWeight` | `number` | `600` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ## Notes The `staggerDelay` prop controls the delay between each word's animation. Lower values create a tighter cascade, higher values create a more dramatic delay. # Strikethrough Replace Text gets crossed out and replaced with new text in a single motion. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/strikethrough-replace ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { StrikethroughReplace } from "@/components/framecn/strikethrough-replace"; ``` ```tsx ``` ## API Reference ### StrikethroughReplace | Prop | Type | Default | | ------------------ | -------- | ----------- | | `from` | `string` | `-` | | `to` | `string` | `-` | | `lineColor` | `string` | `"#ff5e3a"` | | `fontSize` | `number` | `48` | | `color` | `string` | `"#171717"` | | `fontWeight` | `number` | `600` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ## Notes The strikethrough line cuts diagonally from top-left to bottom-right. The animation syncs the old text removal with the new text reveal. # Text Fade Replace Cross-fades between two strings on the same line. Includes a Strikethrough variant. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/text-fade-replace ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { TextFadeReplace } from "@/components/framecn/text-fade-replace"; ``` ```tsx ``` ## API Reference ### TextFadeReplace | Prop | Type | Default | | ------------------ | -------- | -------------------- | | `from` | `string` | `-` | | `to` | `string` | `-` | | `fontSize` | `number` | `48` | | `color` | `string` | `"#171717"` | | `fontWeight` | `number` | `600` | | `speed` | `number` | `1` | | `fps` | `number` | `FPS` | | `durationInFrames` | `number` | `DURATION_IN_FRAMES` | | `className` | `string` | `-` | ## Notes The component supports a strikethrough animation variant. Check the demo to see the strikethrough effect in action. For the best cross-fade effect, ensure `fromText` and `toText` are approximately the same length to avoid layout shift. # Top Down Letters Each letter falls from above with a staggered fade-in cascade. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/top-down-letters ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { TopDownLetters } from "@/components/framecn/top-down-letters"; ``` ```tsx ``` ## API Reference ### TopDownLetters | Prop | Type | Default | | ------------------ | -------- | --------------- | | `text` | `string` | `"Hello world"` | | `staggerDelay` | `number` | `3` | | `distance` | `number` | `46` | | `fontSize` | `number` | `72` | | `color` | `string` | `"#171717"` | | `fontWeight` | `number` | `600` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ## Notes Text is split into individual characters. Spaces are preserved using `white-space: pre`. The `distance` prop controls how far above each letter starts before falling into place. # Tracking In Letter-spacing collapses from wide to normal with a spring snap. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/tracking-in ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { TrackingIn } from "@/components/framecn/tracking-in"; ``` ```tsx ``` ## API Reference ### TrackingIn | Prop | Type | Default | | ------------------ | -------- | --------------- | | `text` | `string` | `"Tracking In"` | | `startTracking` | `number` | `0.5` | | `startBlur` | `number` | `12` | | `fontSize` | `number` | `96` | | `color` | `string` | `"#171717"` | | `fontWeight` | `number` | `700` | | `speed` | `number` | `1` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `90` | | `className` | `string` | `-` | ## Notes The letter-spacing uses a spring animation for a natural snap effect. The duration controls the spring configuration. # Typewriter Character-by-character text reveal with a deterministic blinking cursor. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/typewriter ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { Typewriter } from "@/components/framecn/typewriter"; ``` ```tsx ``` ## API Reference ### Typewriter | Prop | Type | Default | | ------------------ | --------- | ------------------------------- | | `text` | `string` | `"console.log('hello, world')"` | | `cursor` | `boolean` | `true` | | `charsPerSecond` | `number` | `20` | | `speed` | `number` | `1` | | `fontSize` | `number` | `48` | | `color` | `string` | `"#171717"` | | `cursorColor` | `string` | `"#171717"` | | `fontWeight` | `number` | `600` | | `className` | `string` | `-` | | `fps` | `number` | `30` | | `durationInFrames` | `number` | `120` | | `width` | `number` | `1000` | | `height` | `number` | `500` | | `background` | `string` | `"white"` | ## Notes The cursor uses a deterministic blink pattern that toggles visibility every frame. For a faster blink rate, decrease FPS or use a custom cursor implementation. The typewriter requires the `text` prop to be a string. If you need to type JSX elements, consider using a separate typewriter component for each element. # Color Panels Overlapping translucent color panels sliding past each other. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/shader-color-panels ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ShaderColorPanels } from "@/components/framecn/shader-color-panels"; ``` ```tsx ``` ## Credits Shader by [paper-design/shaders](https://github.com/paper-design/shaders). # Dithering Ordered-dither shading over an animated gradient field. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/shader-dithering ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ShaderDithering } from "@/components/framecn/shader-dithering"; ``` ```tsx ``` ## Credits Shader by [paper-design/shaders](https://github.com/paper-design/shaders). # Dot Orbit Dots orbiting on concentric paths across the frame. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/shader-dot-orbit ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ShaderDotOrbit } from "@/components/framecn/shader-dot-orbit"; ``` ```tsx ``` ## Credits Shader by [paper-design/shaders](https://github.com/paper-design/shaders). # God Rays Volumetric light rays radiating from an off-screen source. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/shader-god-rays ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ShaderGodRays } from "@/components/framecn/shader-god-rays"; ``` ```tsx ``` ## Credits Shader by [paper-design/shaders](https://github.com/paper-design/shaders). # Grain Gradient Grainy multi-stop gradient that drifts slowly with film-grain texture over the blend. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/shader-grain-gradient ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ShaderGrainGradient } from "@/components/framecn/shader-grain-gradient"; ``` ```tsx ``` ## Credits Shader by [paper-design/shaders](https://github.com/paper-design/shaders). # Liquid Metal Molten metallic surface with flowing specular highlights. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/shader-liquid-metal ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ShaderLiquidMetal } from "@/components/framecn/shader-liquid-metal"; ``` ```tsx ``` ## Credits Shader by [paper-design/shaders](https://github.com/paper-design/shaders). # Mesh Gradient WebGL mesh gradient backdrop driven per-frame for deterministic Editframe renders. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/shader-mesh-gradient ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ShaderMeshGradient } from "@/components/framecn/shader-mesh-gradient"; ``` ```tsx ``` ## Credits Shader by [paper-design/shaders](https://github.com/paper-design/shaders). # Metaballs Organic blobs merging and splitting like lava. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/shader-metaballs ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ShaderMetaballs } from "@/components/framecn/shader-metaballs"; ``` ```tsx ``` ## Credits Shader by [paper-design/shaders](https://github.com/paper-design/shaders). # Neuro Noise Organic neural-web noise field that slowly morphs. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/shader-neuro-noise ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ShaderNeuroNoise } from "@/components/framecn/shader-neuro-noise"; ``` ```tsx ``` ## Credits Shader by [paper-design/shaders](https://github.com/paper-design/shaders). # Perlin Noise Classic Perlin noise clouds drifting across the frame. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/shader-perlin-noise ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ShaderPerlinNoise } from "@/components/framecn/shader-perlin-noise"; ``` ```tsx ``` ## Credits Shader by [paper-design/shaders](https://github.com/paper-design/shaders). # Pulsing Border Glowing border frame that pulses around the edges. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/shader-pulsing-border ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ShaderPulsingBorder } from "@/components/framecn/shader-pulsing-border"; ``` ```tsx ``` ## Credits Shader by [paper-design/shaders](https://github.com/paper-design/shaders). # Simplex Noise Simplex noise flow field, smoother than Perlin. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/shader-simplex-noise ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ShaderSimplexNoise } from "@/components/framecn/shader-simplex-noise"; ``` ```tsx ``` ## Credits Shader by [paper-design/shaders](https://github.com/paper-design/shaders). # Smoke Ring Soft smoke ring curling and dissipating in place. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/shader-smoke-ring ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ShaderSmokeRing } from "@/components/framecn/shader-smoke-ring"; ``` ```tsx ``` ## Credits Shader by [paper-design/shaders](https://github.com/paper-design/shaders). # Spiral Rotating spiral arms radiating from the center. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/shader-spiral ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ShaderSpiral } from "@/components/framecn/shader-spiral"; ``` ```tsx ``` ## Credits Shader by [paper-design/shaders](https://github.com/paper-design/shaders). # Swirl Concentric bands swirling around a center point. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/shader-swirl ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ShaderSwirl } from "@/components/framecn/shader-swirl"; ``` ```tsx ``` ## Credits Shader by [paper-design/shaders](https://github.com/paper-design/shaders). # Voronoi Animated Voronoi cells shifting and re-tessellating. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/shader-voronoi ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ShaderVoronoi } from "@/components/framecn/shader-voronoi"; ``` ```tsx ``` ## Credits Shader by [paper-design/shaders](https://github.com/paper-design/shaders). # Warp Domain-warped color field that folds and stretches like liquid. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/shader-warp ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ShaderWarp } from "@/components/framecn/shader-warp"; ``` ```tsx ``` ## Credits Shader by [paper-design/shaders](https://github.com/paper-design/shaders). # Water Caustic water-surface ripples with subtle refraction. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation Command Manual ```bash npx shadcn@latest add @framecn/shader-water ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ShaderWater } from "@/components/framecn/shader-water"; ``` ```tsx ``` ## Credits Shader by [paper-design/shaders](https://github.com/paper-design/shaders).