ספרייה אחת, משותפת. קחו מה שמתאים.

קומפוננטות, סאונד, תמונות ושכבות-על שאנשים שיתפו מהסרטונים שלהם. מוצאים כאן ומושכים לפי המזהה.

Reelkit בחינם, והעיון פתוח לכולם. למשיכה צריך את ה-⁠CLI וחשבון חינמי: מריצים reelkit auth login ומתחברים עם קישור שמגיע לאימייל.

קומפוננטות
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
שימוש
```
<CTAButton label="Start free" kicker="Ready when you are" pressAt={30} />
```
```
reelkit assets pull cmp-ctabutton
```
קומפוננטות
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
שימוש
```
<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
```
קומפוננטות
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
שימוש
```
<BrowserMockup address="example.com" />
```
```
reelkit assets pull cmp-browsermockup
```
קומפוננטות
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
שימוש
```
<PhoneMockup size={0.7} tilt={-6} />
```
```
reelkit assets pull cmp-phonemockup
```
קומפוננטות
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
שימוש
```
<QuoteCard quote="It paid for itself in the first week." author="Dana Levi" role="Studio owner" stars={5} />
```
```
reelkit assets pull cmp-quotecard
```
קומפוננטות
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
שימוש
```
<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
```
קומפוננטות
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
שימוש
```
<ComparisonSplit leftTitle="Before" rightTitle="After" leftPoints={["Tired by noon", "Stiff back"]} rightPoints={["Steady energy", "Moves freely"]} winner="right" />
```
```
reelkit assets pull cmp-comparisonsplit
```
קומפוננטות
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
שימוש
```
<StatCard value={75} suffix="%" label="of your brain is water" delta="more than any other organ" direction="up" />
```
```
reelkit assets pull cmp-statcard
```
קומפוננטות
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
שימוש
```
<LineChart title="Monthly users" values={[120, 180, 160, 260, 340, 520]} startLabel="Jan" endLabel="Jun" />
```
```
reelkit assets pull cmp-linechart
```
קומפוננטות
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
שימוש
```
<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
```
קומפוננטות
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
שימוש
```
<KineticTitle lines={["Stop", "wasting", "your time"]} accentLine={1} accent="#7C3AED" />
```
```
reelkit assets pull cmp-kinetictitle
```
קומפוננטות
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
שימוש
```
<NeonText text="Open late" text2="Tonight" face="script" face2="bold" color="#22D3EE" color2="#F472B6" />
```
```
reelkit assets pull cmp-neontext
```
קומפוננטות
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
שימוש
```
<HandDrawnMark shape="loop" x={0.5} y={0.5} size={0.5} color="#ffffff" />
```
```
reelkit assets pull cmp-handdrawnmark
```
קומפוננטות
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
שימוש
```
<CallOut targetX={0.32} targetY={0.42} labelX={0.56} labelY={0.28} title="Battery" subtitle="Lasts two days" />
```
```
reelkit assets pull cmp-callout
```
קומפוננטות
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
שימוש
```
<NameLowerThird name="Jennifer Anderson" role="Chief Technology Officer" variant="boxed" />
```
```
reelkit assets pull cmp-namelowerthird
```
קומפוננטות
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
שימוש
```
<SocialHandle handle="@yourusername" platform="instagram" callout="Follow me" side="left" delay={4} />
```
```
reelkit assets pull cmp-socialhandle
```
קומפוננטות
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
שימוש
```
<StatusToast status="success" title="Payment successful" detail="Receipt sent to your inbox" />
```
```
reelkit assets pull cmp-statustoast
```
קומפוננטות
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
שימוש
```
<AlertDialog title="Allow notifications?" message="We only send what matters." buttons={["Cancel", "Allow"]} pressAt={40} />
```
```
reelkit assets pull cmp-alertdialog
```
קומפוננטות
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
שימוש
```
<NotificationBanner app="WhatsApp" icon="whatsapp" title="Jane Robertson" message="Hello! How are you?" time="now" delay={6} />
```
```
reelkit assets pull cmp-notificationbanner
```