FrameCN

Overview

framecn is a collection of customizable video components for React, built on Editframe and distributed through the shadcn CLI. It is built by Aniket Pawar and the source is on GitHub. The registry holds 148 items: 103 video components, 36 UI pieces and 8 blocks.

Components are designed for composing motion videos such as product launch trailers, landing page showcases and captioned clips, with a separate group of shader effects. The docs are split into Components, UI and Shaders sections.

Features

• Text animations: Blur reveal, typewriter, marker highlight, slot machine roll, matrix decode, RGB glitch text, kinetic type mask and per-character rise.
• Captions: More than a dozen caption styles, including karaoke pill, kinetic slam, emoji pop, neon glow, gradient fill and particle burst.
• Transitions: Directional wipe, zoom-through, frosted glass wipe, grid pixelate wipe, chromatic aberration wipe and swipe transition.
• Product demo scenes: Terminal simulator, terminal-to-browser deploy, live code compilation, dashboard populate, device mockup zoom and AI generation canvas.
• Charts and data: Animated line and bar charts and data flow pipes.
• Shaders: God rays, liquid metal, mesh gradient, metaballs, Perlin and simplex noise, smoke ring, Voronoi and water.
• UI elements: Accordion, button, checkbox, combobox, command menu, dialog, drawer and cursor components for on-screen demos.

Tech stack

• React, shadcn/ui
• Editframe (@editframe/react)
• Paper Design shaders

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @framecn/component-name