Captions
Compositions
Core Primitives
Transitions
Typography
- Blur Reveal
- Staggered Fade Up
- Masked Slide Reveal
- Tracking In
- Inline Highlight
- Marker Highlight
- Shimmer Sweep
- Typewriter
- Text Fade Replace
- Slot Machine Roll
- Infinite Marquee
- Perspective Marquee
- Matrix Decode
- RGB Glitch Text
- Strikethrough Replace
- Blur Out Up
- Bottom Up Letters
- Top Down Letters
- Per Character Rise
- Soft Blur In
- Micro Scale Fade
- Scale Down Fade
- Focus Blur Resolve
- Spring Scale In
- Line by Line Slide
- Mask Reveal Up
- Short Slide Right
Customize
30
16
1
720
Installation
$ pnpm dlx shadcn@latest add @framecn/code-accordion
Usage
import { CodeAccordion } from "@/components/framecn/code-accordion";<CodeAccordion />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
Collapsible code region
Long code blocks collapse in the middle with a line count badge. Click to expand and see the full code.