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.
Results
24 items shown
Tension Overlap
Ultimate Social Content / Transitions Long
reelkit assets pull ultimate-social-content-transitions-long-tension-overlapSearch
Bar A search field that pops in, has a query typed into it with a blinking caret, then drops down suggestions with the first one selected. For 'people ask', looking something up and intros to a question. Variants: light, dark.
Usage
<SearchBar query="how to sleep better" suggestions={["how to sleep better at night", "how to sleep better with stress", "how to sleep better naturally"]} />reelkit assets pull cmp-searchbarTense
Ultimate Social Content / Transitions Long
reelkit assets pull ultimate-social-content-transitions-long-tenseCode
Window An editor window whose code appears line by line with light syntax colouring, then dims everything except the highlighted lines. For explaining a snippet or showing how little code something takes.
Usage
<CodeWindow filename="greet.ts" lines={["// Say hello to everyone", "const names = [\"Ada\", \"Linus\"];", "for (const name of names) {", " console.log(`Hello, ${name}`);", "}"]} highlight={[4]} />reelkit assets pull cmp-codewindowSurround
Ultimate Social Content / Transitions Long
reelkit assets pull ultimate-social-content-transitions-long-surroundTerminal
Window A terminal window where commands are typed character by character and their output prints underneath, with success and error lines in colour. For developer tools, install steps and CLI demos. Show only commands that really exist.
Usage
<TerminalWindow title="zsh" lines={[{ text: "npm install my-package" }, { text: "added 12 packages in 2s", kind: "output" }, { text: "npm run build" }, { text: "Build finished", kind: "success" }]} />reelkit assets pull cmp-terminalwindowSmooth
Ultimate Social Content / Transitions Long
reelkit assets pull ultimate-social-content-transitions-long-smoothPricing
Card A pricing plan card that rises in: plan name, the price, the included features ticking in one by one, a ribbon and a button. Pass the real price and features only.
Usage
<PricingCard plan="Pro" price="$19" period="/month" badge="Most popular" features={["Unlimited projects", "Priority support", "Custom domain"]} cta="Start free trial" />reelkit assets pull cmp-pricingcardSubtle
Ultimate Social Content / Transitions Long
reelkit assets pull ultimate-social-content-transitions-long-subtleTimeline
A horizontal timeline: the line draws from left to right and each milestone's dot, date and title land as it is reached. For a company story, a roadmap or a schedule. Pass only real dates.
Usage
<Timeline heading="How we got here" events={[{ when: "2021", title: "First sketch" }, { when: "2022", title: "Beta opens" }, { when: "2023", title: "Public launch" }, { when: "2024", title: "A million users" }]} eventEvery={16} />reelkit assets pull cmp-timelineShimmering Transition
Ultimate Social Content / Transitions Long
reelkit assets pull ultimate-social-content-transitions-long-shimmering-transitionCountdown
A countdown in a ring: each number pops in while the ring drains, then an optional closing word fills the ring. For openings, launches and three-two-one moments.
Usage
<Countdown from={3} every={28} label="Starting in" endText="Go" />reelkit assets pull cmp-countdownSharp
Ultimate Social Content / Transitions Long
reelkit assets pull ultimate-social-content-transitions-long-sharpProgress
Bars Labelled horizontal bars that fill to their values one after another while the figures count up. For percentages, survey answers and progress towards a goal. One bar can be highlighted. Pass only real figures. Pass rtl for right-to-left labels.
Usage
<ProgressBars heading="Where the day goes" data={[{ label: "Meetings", value: 46 }, { label: "Email", value: 28 }, { label: "Real work", value: 26 }]} highlight={2} />reelkit assets pull cmp-progressbarsScary Transition
Ultimate Social Content / Transitions Long
reelkit assets pull ultimate-social-content-transitions-long-scary-transitionChecklist
A list whose boxes are ticked one after another, with an optional cross for the items that do not apply. For benefits, requirements and to-do lists. Use tickAt to mark each item when the narration reaches it.
Usage
<Checklist heading="Before you launch" items={["Write the script", "Record the voice", "Pick the music", "Skip the busywork"]} crossed={[3]} tickEvery={16} />reelkit assets pull cmp-checklistScary
Ultimate Social Content / Transitions Long
reelkit assets pull ultimate-social-content-transitions-long-scaryComposed
Chart Bars with a glowing line drawn over them, for two related measures over the same periods, each on its own scale. Pass only real figures.
Usage
<ComposedChart title="Sales and growth" barName="Sales" lineName="Growth" data={[{ label: "Q1", bar: 40, line: 5 }, { label: "Q2", bar: 55, line: 9 }, { label: "Q3", bar: 62, line: 8 }, { label: "Q4", bar: 90, line: 15 }]} />reelkit assets pull cmp-composedchartRobe
Ultimate Social Content / Transitions Long
reelkit assets pull ultimate-social-content-transitions-long-robeRadar
Chart A radar (spider) chart comparing one or two things across three to eight qualities. The shape grows out from the centre with a soft glow. Variants: filled or lines. Pass only real figures.
Usage
<RadarChart axes={["Speed", "Price", "Battery", "Camera", "Screen"]} series={[{ name: "Phone A", values: [80, 60, 90, 70, 85] }, { name: "Phone B", values: [65, 85, 60, 90, 70] }]} />reelkit assets pull cmp-radarchartRise Transition
Ultimate Social Content / Transitions Long
reelkit assets pull ultimate-social-content-transitions-long-rise-transitionRadial
Chart Concentric progress rings (full) or a half-circle gauge (semi) that fill to their values, with a centre figure. Good for scores, goals and percentages. Pass only real figures.
Usage
<RadialChart variant="semi" data={[{ label: "Score", value: 81 }]} centerValue="81%" centerLabel="battery health" />reelkit assets pull cmp-radialchartHollow Rise
Ultimate Social Content / Transitions Long
reelkit assets pull ultimate-social-content-transitions-long-hollow-risePie
Chart A pie or donut chart whose sectors sweep in clockwise, with one sector lifted and glowing, an optional figure in the centre, and a legend. Pass only real shares.
Usage
<PieChart title="Where the money goes" data={[{ label: "Rent", value: 45 }, { label: "Food", value: 25 }, { label: "Subscriptions", value: 12 }, { label: "Other", value: 18 }]} highlight={2} centerValue="12%" centerLabel="subscriptions" />reelkit assets pull cmp-piechart