{
"name": "stepkit-orbital-timeline",
"type": "registry:component",
"title": "Orbital timeline",
"description": "A radial project timeline adapted from Jatin Yadav's MIT-labelled 21st.dev component.",
"author": "Vladislav Stepanov",
"dependencies": [
"react@19.3.0",
"react-dom@19.3.0"
],
"files": [
{
"path": "components/stepkit/OrbitalTimeline.tsx",
"content": "/*\n * Stepkit 0.3.0\n * Copyright (c) 2026 Vladislav Stepanov\n *\n * Original Stepkit portions in this release are licensed under the MIT License. Adapted portions identify their upstream licence and attribution in the copied source and in the entry-specific upstream notice files.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n *\n *\n * MIT License\n *\n * Upstream attribution: Jatin Yadav, Radial Orbital Timeline, as published at\n * https://21st.dev/@jatin-yadav05/components/radial-orbital-timeline\n *\n * The upstream component page labels this component MIT License and does not\n * provide a separate copyright line. No copyright holder or year is added here.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n *\n */\n\"use client\";\n\nimport { useEffect, useRef, useState, type ComponentType, type CSSProperties, type MouseEvent } from \"react\";\nimport \"./styles.css\";\nimport \"./adapted-showcase.css\";\n\n/**\n * Adapted from Jatin Yadav's Radial Orbital Timeline (MIT label on 21st.dev).\n * Source: https://cdn.21st.dev/user_2ra80vx0iKMyQWJ5AESmNfFbCHD/radial-orbital-timeline/code.tsx?v=1\n * Evidence: provenance/21ST-JATIN-RADIAL-ORBITAL-LICENSE-EVIDENCE.md\n * Stepkit replaces Tailwind/shadcn primitives with native controls and scoped tokens.\n */\nexport type TimelineStatus = \"completed\" | \"in-progress\" | \"pending\";\nexport type TimelineIcon = ComponentType<{ size?: number; className?: string; \"aria-hidden\"?: boolean }>;\nexport interface TimelineItem {\n id: number;\n title: string;\n date: string;\n content: string;\n category: string;\n icon?: TimelineIcon;\n relatedIds: number[];\n status: TimelineStatus;\n energy: number;\n}\nexport interface OrbitalTimelineProps {\n timelineData: TimelineItem[];\n title?: string;\n paused?: boolean;\n className?: string;\n}\ntype OrbitStyle = CSSProperties & Record<`--stepkit-${string}`, string | number>;\n\nfunction statusLabel(status: TimelineStatus) {\n return status === \"completed\" ? \"COMPLETE\" : status === \"in-progress\" ? \"IN PROGRESS\" : \"PENDING\";\n}\n\nfunction FallbackIcon({ category }: { category: string }) {\n const kind = category.toLowerCase();\n const path = kind.includes(\"design\") ? : kind.includes(\"test\") ? : kind.includes(\"release\") ? : ;\n return ;\n}\n\nexport function OrbitalTimeline({ timelineData, title = \"Project orbit\", paused = false, className = \"\" }: OrbitalTimelineProps) {\n const [expandedItems, setExpandedItems] = useState>({});\n const [rotationAngle, setRotationAngle] = useState(0);\n const [autoRotate, setAutoRotate] = useState(true);\n const [pulseEffect, setPulseEffect] = useState>({});\n const [activeNodeId, setActiveNodeId] = useState(null);\n const [reducedMotion, setReducedMotion] = useState(false);\n const [focusWithin, setFocusWithin] = useState(false);\n const [orbitSize, setOrbitSize] = useState(500);\n const containerRef = useRef(null);\n const orbitRef = useRef(null);\n\n useEffect(() => {\n const element = orbitRef.current;\n if (!element) return;\n const update = () => setOrbitSize(element.getBoundingClientRect().width || 500);\n update();\n if (typeof ResizeObserver === \"undefined\") return;\n const observer = new ResizeObserver(update);\n observer.observe(element);\n return () => observer.disconnect();\n }, []);\n\n useEffect(() => {\n if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") return;\n const media = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n const update = () => setReducedMotion(media.matches);\n update();\n media.addEventListener?.(\"change\", update);\n return () => media.removeEventListener?.(\"change\", update);\n }, []);\n\n useEffect(() => {\n if (!autoRotate || paused || reducedMotion || focusWithin) return;\n const timer = window.setInterval(() => setRotationAngle((current) => (current + 0.3) % 360), 40);\n return () => window.clearInterval(timer);\n }, [autoRotate, paused, reducedMotion, focusWithin]);\n\n const closeActive = () => {\n setExpandedItems({});\n setActiveNodeId(null);\n setPulseEffect({});\n setAutoRotate(true);\n };\n\n const handleContainerClick = (event: MouseEvent) => {\n if (event.target === containerRef.current || event.target === orbitRef.current) closeActive();\n };\n\n const relatedItems = (id: number) => timelineData.find((item) => item.id === id)?.relatedIds ?? [];\n const toggleItem = (id: number) => {\n const isOpen = Boolean(expandedItems[id]);\n const next = Object.fromEntries(Object.keys(expandedItems).map((key) => [Number(key), false])) as Record;\n next[id] = !isOpen;\n setExpandedItems(next);\n if (isOpen) {\n setActiveNodeId(null);\n setPulseEffect({});\n setAutoRotate(true);\n return;\n }\n setActiveNodeId(id);\n setAutoRotate(false);\n setPulseEffect(Object.fromEntries(relatedItems(id).map((relatedId) => [relatedId, true])));\n const index = timelineData.findIndex((item) => item.id === id);\n if (index >= 0 && timelineData.length > 0) setRotationAngle(270 - (index / timelineData.length) * 360);\n };\n\n const calculateNodePosition = (index: number, total: number) => {\n const angle = ((index / total) * 360 + rotationAngle) % 360;\n const radians = angle * (Math.PI / 180);\n const radius = Math.max(70, Math.min(200, orbitSize / 2 - 54));\n return {\n x: Number((radius * Math.cos(radians)).toFixed(3)),\n y: Number((radius * Math.sin(radians)).toFixed(3)),\n zIndex: Math.round(100 - 50 * Math.sin(radians)),\n opacity: Number((0.4 + 0.6 * ((1 + Math.sin(radians)) / 2)).toFixed(3)),\n };\n };\n\n return (\n setFocusWithin(true)} onBlurCapture={(event) => { if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setFocusWithin(false); }}>\n Radial orbital timeline
{title}
Follow related work around a single point of focus.