- Animated Beam
- Animated Circular Progress Bar
- Animated Gradient Text
- Animated Grid Pattern
- Animated List
- Animated Shiny Text
- Animated Theme Toggler
- Arc Timeline
- Aurora Text
- Backlight New
- Avatar Circles
- Bento Grid
- Blur Fade
- Border Beam
- Cool Mode
- Dia Text Reveal New
- Dither Shader New
- Dock
- Dot Pattern
- Dotted Map New
- File Tree
- Flickering Grid
- Grid Pattern
- Hero Video Dialog
- Hyper Text
- Icon Cloud
- Interactive Hover Button
- Lens
- Light Rays
- Line Shadow Text
- Magic Card
- Marquee
- Meteors
- Morphing Text New
- Motion Grid Beta
- Neon Gradient Card
- Number Ticker
- Orbiting Circles
- Pixel Image New
- Pointer
- Progressive Blur
- Pulsating Button
- Rainbow Button
- Retro Grid
- Ripple
- Ripple Button
- Scroll Progress
- Shimmer Button
- Shine Border
- Smooth Cursor
- Striped Pattern New
- Text Animate
- Typing Animation
- Video Text
- Warp Background
- Word Rotate Beta
A curved timeline that rotates through milestone steps with clickable markers, icons, and configurable spacing.
Founded Visionary Tech, a cutting-edge AI development company.
Launched first AI-powered mobile app for personalized recommendations.
Raised $3M seed round at a $20M valuation.
Expanded to global markets with localized app versions in 5 countries.
Implemented enhanced machine learning algorithms for data prediction.
Introduced AI-powered virtual assistant for customer service.
Partnered with several tech giants to enhance app capabilities.
Launched AR-based features for more immersive user experiences.
Rolled out AI-driven marketplace for personalized product discovery.
Introduced blockchain integration for secure transactions.
Showcased at CES with revolutionary AI-powered consumer products.
Rebranded company with new logo and visual identity.
Launched AI-driven content creation tool for marketing teams.
Acquired a competitor in the AI space to strengthen market position.
Launched self-driving AI platform for industrial automation.
Added virtual reality integration to the product suite.
Introduced AI-driven analytics dashboard for enterprise clients.
Launched international expansion into Asian and European markets.
Hosted first global conference showcasing AI innovations.
Released API for developers to integrate AI into their applications.
Launched new AI-powered voice assistant with multi-language support.
Partnered with government agencies for AI-driven policy making.
Unveiled new AI-powered robotics platform for manufacturing.
Introduced machine learning models for sustainable energy solutions.
Installation
Copy the Source Code
Copy and paste the following code into your project:
Folder Structure
Examples
Product Roadmap
Mapped workflow pain points across 18 customer interviews.
Locked the core job-to-be-done and success metrics for v1.
Shipped an internal prototype for structured content generation.
Added telemetry, prompt versioning, and error reporting.
Opened a private beta with AI-assisted campaign drafts and tone presets.
Ran weekly release trains with guided feedback sessions.
Reduced generation latency by 38% before public launch.
Released self-serve onboarding, billing, and workspace templates.
Published customer stories and benchmark results on launch day.
Localized the editor for multilingual teams across new regions.
Launched a template marketplace for partner-built workflows.
Rolled out admin controls, approvals, and audit history.
Introduced automation recipes for briefs, ads, and landing pages.
Added event streaming hooks for enterprise analytics pipelines.
Props
ArcTimeline
The root timeline container that renders grouped milestone steps around a rotating arc.
| Name | Type | Default | Description |
|---|---|---|---|
class | string | "" | Additional CSS classes applied to the root container. |
ref | HTMLDivElement | null | null | Optional bindable reference to the root timeline element. |
data | ArcTimelineItem[] | required | Timeline groups and steps rendered around the arc. |
arcConfig | ArcTimelineArcConfig | {} | Overrides for circle size and line spacing. |
defaultActiveStep | ArcTimelineDefaultActiveStep | {} | Initial active milestone selected when the component mounts. |
ArcTimelineItem
A timeline group with a shared time label and one or more steps.
| Name | Type | Default | Description |
|---|---|---|---|
time | ArcTimelineRenderable | required | Label rendered above the first step in the group. Accepts a snippet or primitive value. |
steps | ArcTimelineStep[] | required | Milestone steps associated with the group. |
ArcTimelineStep
A single milestone marker rendered on the arc.
| Name | Type | Default | Description |
|---|---|---|---|
icon | ArcTimelineRenderable | required | Icon marker content. Accepts a snippet or primitive value. |
content | ArcTimelineRenderable | required | Step description shown for the active marker. Accepts a snippet or primitive value. |
ArcTimelineArcConfig
Controls the geometry and spacing of the arc.
| Name | Type | Default | Description |
|---|---|---|---|
circleWidth | number | 5000 | Diameter of the invisible circle used to position the arc lines. |
angleBetweenMinorSteps | number | 0.35 | Rotation increment in degrees between minor placeholder lines. |
lineCountFillBetweenSteps | number | 10 | Number of placeholder lines inserted between adjacent steps. |
boundaryPlaceholderLinesCount | number | 50 | Number of placeholder lines rendered before the first step and after the last step. |
ArcTimelineDefaultActiveStep
Selects the milestone that should be active on first render.
| Name | Type | Default | Description |
|---|---|---|---|
time | ArcTimelineItem["time"] | data[0]?.time | Time group to activate. Primitive labels like strings are the most practical for matching. |
stepIndex | number | 0 | Index of the step within the matching time group. |