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
Usage
import { ArcTimeline } from "@/components/magicui/arc-timeline";const data = [
{
time: "2025",
steps: [
{ icon: <span>🚀</span>, content: "Launched v1" },
{ icon: <span>✨</span>, content: "Improved UX" },
],
},
{
time: "2026",
steps: [{ icon: <span>📈</span>, content: "Growth" }],
},
];
<ArcTimeline data={data} />;Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | The class name to apply to the component. |
data | ArcTimelineItem[] | - | The data of the arc timeline. |
arcConfig.circleWidth | number | 5000 | The width of the circle. |
arcConfig.angleBetweenMinorSteps | number | 0.35 | The angle between minor steps. |
arcConfig.lineCountFillBetweenSteps | number | 10 | The number of lines to fill between steps. |
arcConfig.boundaryPlaceholderLinesCount | number | 50 | The number of lines to fill in before the first step and after the last step |
defaultActiveStep.time | string | data[0].time | The time of the default active step. |
defaultActiveStep.stepIndex | number | 0 | The index of the default active step. |
CSS Variables
| Variable | Default | Description |
|---|---|---|
--step-line-active-color | light: #888888, dark: #9780ff | The color of the active step line. |
--step-line-inactive-color | light: #b1b1b1, dark: #737373 | The color of the inactive step line. |
--placeholder-line-color | light: #a1a1a1, dark: #737373 | The color of the placeholder line. |
--time-active-color | light: #555555, dark: #d4d4d4 | The color of the active time. |
--time-inactive-color | light: #a3a3a3, dark: #a3a3a3 | The color of the inactive time. |
--description-color | light: #555555, dark: #d4d4d4 | The color of the description. |
--icon-active-color | light: #555555, dark: #d4d4d4 | The color of the active icon. |
--icon-inactive-color | light: #a3a3a3, dark: #a3a3a3 | The color of the inactive icon. |