One shared library. Take what fits.

Components, sounds, images and overlays that people shared from their own videos. Find one here, then pull it by its id.

Reelkit is free, and browsing is open to everyone. Pulling needs the CLI and a free account: run reelkit auth login and sign in with an email link.

Components
CTAButton
The closing call to action: a button that pops in, breathes, and is pressed by a cursor, with an optional line above it.
- cta
- button
- closing
- click
Usage
```
<CTAButton label="Start free" kicker="Ready when you are" pressAt={30} />
```
```
reelkit assets pull cmp-ctabutton
```
Components
ChatThread
A text-message conversation: bubbles pop in one at a time, with a typing indicator before replies. Use appearAt to time each bubble to the narration.
- chat
- messages
- conversation
- bubbles
Usage
```
<ChatThread messages={[{ from: "them", text: "Are we still on for tonight?" }, { from: "me", text: "Yes! 8pm" }, { from: "them", text: "Perfect" }]} messageEvery={14} />
```
```
reelkit assets pull cmp-chatthread
```
Components
BrowserMockup
A browser window that scales up into frame showing the user's real website screenshot, with an address bar. Pass src={urls[key]} of an uploaded screenshot; never fake a website.
- browser
- website
- screenshot
- demo
Usage
```
<BrowserMockup address="example.com" />
```
```
reelkit assets pull cmp-browsermockup
```
Components
PhoneMockup
A phone that rises into frame showing the user's real app screenshot, with a slight tilt and slow float. Pass src={urls[key]} of an uploaded screenshot; never fake an app screen.
- phone
- device
- app
- screenshot
- demo
Usage
```
<PhoneMockup size={0.7} tilt={-6} />
```
```
reelkit assets pull cmp-phonemockup
```
Components
QuoteCard
A quotation or customer review: large quote mark, the words revealed a few at a time, then who said it, with optional review stars. Use only a real quote supplied by the user.
- quote
- testimonial
- review
- stars
Usage
```
<QuoteCard quote="It paid for itself in the first week." author="Dana Levi" role="Studio owner" stars={5} />
```
```
reelkit assets pull cmp-quotecard
```
Components
StepList
A numbered list of steps joined by a line that fills as each step becomes current. For how-to and process videos. Use activateAt to light each step when the narration reaches it.
- steps
- process
- how-to
- list
Usage
```
<StepList heading="How it works" steps={[{ title: "Sign up", detail: "Takes a minute" }, { title: "Connect" }, { title: "Go live" }]} stepEvery={14} />
```
```
reelkit assets pull cmp-steplist
```
Components
ComparisonSplit
A side-by-side comparison: two columns of short points, before against after or one option against another, with a VS badge. The winning side gets the hero colour and ticks.
- comparison
- versus
- before-after
- list
Usage
```
<ComparisonSplit leftTitle="Before" rightTitle="After" leftPoints={["Tired by noon", "Stiff back"]} rightPoints={["Steady energy", "Moves freely"]} winner="right" />
```
```
reelkit assets pull cmp-comparisonsplit
```
Components
StatCard
One big number that counts up, with its label and an optional up or down change line. The payoff shot for a statistic. Pass only a real figure from the narration.
- number
- statistic
- counter
- payoff
Usage
```
<StatCard value={75} suffix="%" label="of your brain is water" delta="more than any other organ" direction="up" />
```
```
reelkit assets pull cmp-statcard
```
Components
LineChart
A trend line that draws itself left to right over a soft filled area, ending on a dot with the final value. Pass only real figures, or showEnd={false} for an illustrative trend.
- chart
- data
- trend
- growth
Usage
```
<LineChart title="Monthly users" values={[120, 180, 160, 260, 340, 520]} startLabel="Jan" endLabel="Jun" />
```
```
reelkit assets pull cmp-linechart
```
Components
CinematicTitle
A film-poster style title for an opening or chapter card: wide-tracked lettering that settles, with small credit lines. Place an image or footage behind it. Faces: black, slab, chunky, script.
- title
- cinematic
- poster
- opening
Usage
```
<CinematicTitle title="Long Nights" overline="A short film" tagline="Some roads never end" credits={["Directed by Sam Hill"]} face="black" />
```
```
reelkit assets pull cmp-cinematictitle
```
Components
KineticTitle
A stacked, heavy title whose lines slam in one after another from alternating sides. One line can be a solid accent block and one can be set in script.
- title
- kinetic
- typography
- hook
Usage
```
<KineticTitle lines={["Stop", "wasting", "your time"]} accentLine={1} accent="#7C3AED" />
```
```
reelkit assets pull cmp-kinetictitle
```
Components
NeonText
Glowing neon-sign lettering that flickers on, for a title or one emphasised word on a dark background. Faces: light, bold, script; optional second line in a second colour.
- neon
- glow
- title
- sign
Usage
```
<NeonText text="Open late" text2="Tonight" face="script" face2="bold" color="#22D3EE" color2="#F472B6" />
```
```
reelkit assets pull cmp-neontext
```
Components
HandDrawnMark
A hand-drawn arrow, circle, underline, tick or cross that draws itself on to point at or emphasise something. Shapes: curve, straight, swoosh, loop, zigzag, down, circle, underline, cross, tick.
- arrow
- hand-drawn
- circle
- underline
- emphasis
Usage
```
<HandDrawnMark shape="loop" x={0.5} y={0.5} size={0.5} color="#ffffff" />
```
```
reelkit assets pull cmp-handdrawnmark
```
Components
CallOut
Points at something in the frame: a pulsing target, an elbow line that draws out from it, and a label at the end. Positions are fractions of the frame.
- callout
- pointer
- label
- annotation
Usage
```
<CallOut targetX={0.32} targetY={0.42} labelX={0.56} labelY={0.28} title="Battery" subtitle="Lasts two days" />
```
```
reelkit assets pull cmp-callout
```
Components
NameLowerThird
A lower third introducing a person: heavy name and lighter role, revealed with a wipe. Variants: boxed, underline, stacked.
- lower-third
- name
- introduction
- corporate
Usage
```
<NameLowerThird name="Jennifer Anderson" role="Chief Technology Officer" variant="boxed" />
```
```
reelkit assets pull cmp-namelowerthird
```
Components
SocialHandle
A follow-me lower third: a coloured bar wipes in with the platform's real logo mark and the account handle. Works for any platform the kit's Icon supports.
- lower-third
- social
- follow
- handle
Usage
```
<SocialHandle handle="@yourusername" platform="instagram" callout="Follow me" side="left" delay={4} />
```
```
reelkit assets pull cmp-socialhandle
```
Components
StatusToast
A result card with a round badge that draws a tick or a cross: payment went through, upload failed, and so on.
- success
- error
- result
- payment
- interface
Usage
```
<StatusToast status="success" title="Payment successful" detail="Receipt sent to your inbox" />
```
```
reelkit assets pull cmp-statustoast
```
Components
AlertDialog
A system-style alert box that pops up in the centre with one or two buttons, optionally showing the main button being tapped.
- alert
- dialog
- popup
- interface
Usage
```
<AlertDialog title="Allow notifications?" message="We only send what matters." buttons={["Cancel", "Allow"]} pressAt={40} />
```
```
reelkit assets pull cmp-alertdialog
```
Components
NotificationBanner
A phone-style notification that drops in from the top, as when a message or alert arrives. Shows the app's real icon. Variants: light, dark, or tinted in the app colour.
- notification
- phone
- message
- interface
Usage
```
<NotificationBanner app="WhatsApp" icon="whatsapp" title="Jane Robertson" message="Hello! How are you?" time="now" delay={6} />
```
```
reelkit assets pull cmp-notificationbanner
```