ספרייה אחת, משותפת. קחו מה שמתאים.
קומפוננטות, סאונד, תמונות ושכבות-על שאנשים שיתפו מהסרטונים שלהם. מוצאים כאן ומושכים לפי המזהה.
Reelkit בחינם, והעיון פתוח לכולם. למשיכה צריך את ה-CLI וחשבון חינמי: מריצים reelkit auth login ומתחברים עם קישור שמגיע לאימייל.
תוצאות
מוצגים 24 פריטים
Poll
Card A poll card: the question and its answers appear, one answer is tapped, then every bar fills to its share with the percentages. For survey results and audience questions. Pass only real results.
שימוש
<PollCard question="When do you get your best work done?" options={[{ label: "Early morning", value: 48 }, { label: "Afternoon", value: 17 }, { label: "Late at night", value: 35 }]} footer="1,204 votes" />reelkit assets pull cmp-pollcardConfetti
A burst of confetti that shoots up from one point, spreads, tumbles and falls away. Lay it over a win, a launch, a milestone or a result. The colours, the number of pieces and the starting point are yours to set.
שימוש
<Confetti count={120} y={0.7} />reelkit assets pull cmp-confettiSticker
Badge A sale or announcement sticker that slams in with a spin and keeps a gentle wobble. Place it anywhere over a product shot or a title. Shapes: burst, circle, pill. Pass a real offer only.
שימוש
<StickerBadge text="50% off" subtext="This week only" shape="burst" size={0.36} />reelkit assets pull cmp-stickerbadgeRanking
List A ranked leaderboard: numbered rows whose horizontal bars grow to their values, with the leader in the hero colour. Set reverse to reveal last place first and number one last. Pass only real figures.
שימוש
<RankingList heading="Most streamed this week" data={[{ label: "Midnight Drive", value: 9200 }, { label: "Paper Planes", value: 7400 }, { label: "Slow Burn", value: 5100 }, { label: "Low Tide", value: 3300 }]} />reelkit assets pull cmp-rankinglistToggle
List A settings panel whose switches flip on one after another, each row with a label and an optional detail line. For turning features on, choosing options or enabling a mode. Variants: light, dark.
שימוש
<ToggleList heading="Settings" rows={[{ label: "Dark mode", detail: "Easier on the eyes", on: true }, { label: "Notifications", on: true }, { label: "Share usage data" }]} />reelkit assets pull cmp-togglelistHighlight
Text A sentence that fades up, then has its key words swept by a highlighter pen one after another. For the one line the viewer must remember. Use markAt to time each sweep to the narration. Variants: marker, underline.
שימוש
<HighlightText text="Most people quit right before it starts working" highlight={["quit", "starts working"]} />reelkit assets pull cmp-highlighttextMarquee
A ticker band of words that scrolls across the frame without end, tilted if wanted, with an optional second band running the other way. For keywords, a sale, a list of features or an energetic divider.
שימוש
<Marquee items={["New drop", "Out now", "Limited run"]} rows={2} tilt={-5} />reelkit assets pull cmp-marqueeIcon
Grid A wall of platform logos on rounded tiles that pop in one after another, with an optional heading and one tile highlighted. For works with, posts to and connects to. Uses the kit's real logo marks; show only platforms the video refers to. Variants: brand, mono.
שימוש
<IconGrid heading="Post everywhere at once" icons={["instagram", "tiktok", "youtube", "facebook", "x", "pinterest", "threads", "snapchat"]} />reelkit assets pull cmp-icongridStar
Rating A rating: the figure counts up while the stars fill from left to right, the last one partly, with a caption underneath. For app store scores and review averages. Pass only a real rating.
שימוש
<StarRating rating={4.8} caption="from 2,143 reviews" />reelkit assets pull cmp-starratingSocial
Post A social media post card: author with picture and optional verified tick, the post's words, the platform's real logo, and like, comment and share counts that count up as the heart fills. Use only a real post and real numbers. Variants: light, dark.
שימוש
<SocialPost name="Maya Cohen" handle="@mayacohen" text="Finally shipped the thing I kept putting off. Turns out starting was the hard part." platform="x" verified likes={4821} comments={312} shares={640} />reelkit assets pull cmp-socialpostSearch
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.
שימוש
<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-searchbarCode
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.
שימוש
<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-codewindowTerminal
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.
שימוש
<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-terminalwindowPricing
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.
שימוש
<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-pricingcardTimeline
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.
שימוש
<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-timelineCountdown
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.
שימוש
<Countdown from={3} every={28} label="Starting in" endText="Go" />reelkit assets pull cmp-countdownProgress
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.
שימוש
<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-progressbarsChecklist
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.
שימוש
<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-checklistComposed
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.
שימוש
<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-composedchartRadar
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.
שימוש
<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-radarchartRadial
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.
שימוש
<RadialChart variant="semi" data={[{ label: "Score", value: 81 }]} centerValue="81%" centerLabel="battery health" />reelkit assets pull cmp-radialchartPie
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.
שימוש
<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-piechartArea
Chart An area chart for one to three series, with gradient, solid, dotted, hatched or lined fills, solid or dashed strokes, point dots and a directional reveal. Pass only real figures.
שימוש
<AreaChart title="Visitors" series={[{ name: "Desktop", values: [186, 305, 237, 273, 409, 514] }, { name: "Mobile", values: [80, 200, 120, 190, 230, 340] }]} labels={["Jan", "Mar", "Jun"]} fill="gradient" />reelkit assets pull cmp-areachartBar
Chart A vertical bar chart whose bars grow in a chosen order (left-to-right, right-to-left, center-out, edges-in), with solid, gradient, hatched, striped or duotone fills, labels below and counting values above. One bar can be highlighted. Pass only real figures.
שימוש
<BarChart title="Hours of sleep" data={[{ label: "Mon", value: 5 }, { label: "Tue", value: 6 }, { label: "Wed", value: 8 }, { label: "Thu", value: 7 }, { label: "Fri", value: 6 }]} highlight={2} variant="hatched" order="center-out" suffix="h" grid />reelkit assets pull cmp-barchart