Skill Orbit Hover Reveal

[{"id":"41653ef7-2f70-49d0-9de3-9f87c9e12dce","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"7c079204-316e-43fe-b742-053863353833","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"*,\\n*::before,\\n*::after {\\n box-sizing: border-box;\\n}\\n\\n:root {\\n --skill-bg: #111111;\\n --skill-card: #151515;\\n --skill-card-hover: #181818;\\n --skill-border: rgba(255, 255, 255, 0.1);\\n --skill-border-strong: rgba(255, 255, 255, 0.16);\\n --skill-text: rgba(255, 255, 255, 0.9);\\n --skill-muted: rgba(255, 255, 255, 0.72);\\n --skill-shadow: rgba(0, 0, 0, 0.35);\\n}\\n\\nhtml {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n background: var(--skill-bg);\\n color: var(--skill-text);\\n font-family:\\n Inter,\\n ui-sans-serif,\\n system-ui,\\n -apple-system,\\n BlinkMacSystemFont,\\n \\\"Segoe UI\\\",\\n sans-serif;\\n}\\n\\n.skill-stage {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.skill-orbit-showcase {\\n width: 100%;\\n min-height: 400px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n padding: 4rem;\\n}\\n\\n.skill-orbit-group {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n gap: 1.15rem;\\n}\\n\\n.skill-orbit-caption {\\n position: relative;\\n z-index: 10;\\n margin: 0;\\n color: var(--skill-muted);\\n font-size: 0.875rem;\\n line-height: 1;\\n}\\n\\n.skill-orbit {\\n --skill-radius: 92px;\\n --skill-duration: 18s;\\n --skill-current-rotation: 0deg;\\n --skill-current-reverse-rotation: 0deg;\\n --cursor-x: 0px;\\n --cursor-y: 0px;\\n --tilt-x: 0deg;\\n --tilt-y: 0deg;\\n\\n position: relative;\\n width: 260px;\\n height: 260px;\\n display: grid;\\n place-items: center;\\n isolation: isolate;\\n perspective: 900px;\\n}\\n\\n.skill-orbit-path {\\n position: absolute;\\n z-index: 1;\\n width: calc(var(--skill-radius) * 2);\\n height: calc(var(--skill-radius) * 2);\\n border: 1px solid var(--skill-border);\\n border-radius: 999px;\\n transform: scale(0);\\n visibility: hidden;\\n pointer-events: none;\\n transition:\\n transform 520ms cubic-bezier(0.22, 1, 0.36, 1),\\n visibility 0s linear 520ms;\\n}\\n\\n.skill-orbit.is-active .skill-orbit-path,\\n.skill-orbit.is-leaving .skill-orbit-path,\\n.skill-orbit.is-collapsing .skill-orbit-path {\\n visibility: visible;\\n}\\n\\n.skill-orbit.is-active .skill-orbit-path,\\n.skill-orbit.is-leaving .skill-orbit-path {\\n transform: scale(1);\\n transition:\\n transform 520ms cubic-bezier(0.22, 1, 0.36, 1),\\n visibility 0s;\\n}\\n\\n.skill-orbit.is-collapsing .skill-orbit-path {\\n transform: scale(0);\\n transition:\\n transform 520ms cubic-bezier(0.65, 0, 0.35, 1),\\n visibility 0s linear 520ms;\\n}\\n\\n.skill-orbit-avatar {\\n position: relative;\\n z-index: 5;\\n display: flex;\\n width: 80px;\\n height: 80px;\\n align-items: center;\\n justify-content: center;\\n border: 1px solid var(--skill-border-strong);\\n border-radius: 999px;\\n background: var(--skill-bg);\\n color: rgba(255, 255, 255, 0.72);\\n box-shadow: 0 18px 40px var(--skill-shadow);\\n transform: translate3d(var(--cursor-x), var(--cursor-y), 0)\\n rotateX(var(--tilt-x)) rotateY(var(--tilt-y));\\n transition:\\n transform 260ms ease,\\n border-color 260ms ease,\\n background-color 260ms ease;\\n}\\n\\n.skill-orbit.is-active .skill-orbit-avatar,\\n.skill-orbit.is-leaving .skill-orbit-avatar {\\n border-color: rgba(255, 255, 255, 0.18);\\n background: #131313;\\n}\\n\\n.skill-orbit-avatar svg {\\n width: 32px;\\n height: 32px;\\n}\\n\\n.skill-orbit-item {\\n position: absolute;\\n left: 50%;\\n top: 50%;\\n z-index: 4;\\n transform: translate(-50%, -50%)\\n rotate(calc(var(--skill-angle) + var(--skill-current-rotation)));\\n will-change: transform;\\n}\\n\\n.skill-orbit-position {\\n visibility: hidden;\\n transform: translateX(0px) scale(0);\\n transition:\\n transform 560ms cubic-bezier(0.22, 1, 0.36, 1),\\n visibility 0s linear 560ms;\\n transition-delay: var(--skill-delay);\\n will-change: transform;\\n}\\n\\n.skill-orbit.is-active .skill-orbit-position {\\n visibility: visible;\\n transform: translateX(var(--skill-radius)) scale(1);\\n transition:\\n transform 560ms cubic-bezier(0.22, 1, 0.36, 1),\\n visibility 0s;\\n transition-delay: var(--skill-delay);\\n}\\n\\n/* Important: while leaving, keep cards outside first */\\n.skill-orbit.is-leaving .skill-orbit-position {\\n visibility: visible;\\n transform: translateX(var(--skill-radius)) scale(1);\\n transition: none;\\n}\\n\\n/* Then collapse after reverse rotation finishes */\\n.skill-orbit.is-collapsing .skill-orbit-position {\\n visibility: visible;\\n transform: translateX(0px) scale(0);\\n transition:\\n transform 520ms cubic-bezier(0.65, 0, 0.35, 1),\\n visibility 0s linear 520ms;\\n transition-delay: var(--skill-close-delay);\\n}\\n\\n.skill-orbit-upright {\\n transform: rotate(\\n calc(var(--skill-reverse-angle) + var(--skill-current-reverse-rotation))\\n );\\n will-change: transform;\\n}\\n\\n.skill-orbit-chip {\\n display: flex;\\n width: 72px;\\n min-height: 64px;\\n align-items: center;\\n justify-content: center;\\n flex-direction: column;\\n gap: 0.45rem;\\n border: 1px solid var(--skill-border-strong);\\n border-radius: 14px;\\n background: var(--skill-card);\\n color: var(--skill-text);\\n font-size: 0.7rem;\\n font-weight: 600;\\n line-height: 1;\\n white-space: nowrap;\\n box-shadow: 0 18px 38px var(--skill-shadow);\\n transform: translateY(8px);\\n transition:\\n transform 380ms cubic-bezier(0.22, 1, 0.36, 1),\\n background-color 260ms ease,\\n border-color 260ms ease;\\n}\\n\\n.skill-orbit.is-active .skill-orbit-chip,\\n.skill-orbit.is-leaving .skill-orbit-chip {\\n transform: translateY(0);\\n}\\n\\n.skill-orbit.is-collapsing .skill-orbit-chip {\\n transform: translateY(8px);\\n}\\n\\n.skill-orbit-chip:hover {\\n background: var(--skill-card-hover);\\n border-color: rgba(255, 255, 255, 0.22);\\n}\\n\\n.skill-orbit-chip svg {\\n width: 17px;\\n height: 17px;\\n flex-shrink: 0;\\n color: rgba(255, 255, 255, 0.82);\\n}\\n\\n.skill-orbit-chip span {\\n display: block;\\n}\\n\\n@media (max-width: 520px) {\\n .skill-orbit-showcase {\\n padding: 2rem 1rem;\\n }\\n\\n .skill-orbit {\\n --skill-radius: 82px;\\n width: 230px;\\n height: 230px;\\n }\\n\\n .skill-orbit-chip {\\n width: 68px;\\n min-height: 60px;\\n font-size: 0.66rem;\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .skill-orbit-path,\\n .skill-orbit-avatar,\\n .skill-orbit-position,\\n .skill-orbit-chip {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Skill Orbit Hover Reveal\\n \\n \\n \\n

\\n

\\n\\n \\n \\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"const ICON_SKILL_ITEMS = [\\n {\\n label: \\\"React\\\",\\n icon: createSkillIcon(\\\"globe\\\"),\\n },\\n {\\n label: \\\"TypeScript\\\",\\n icon: createSkillIcon(\\\"braces\\\"),\\n },\\n {\\n label: \\\"Tailwind\\\",\\n icon: createSkillIcon(\\\"wind\\\"),\\n },\\n {\\n label: \\\"Figma\\\",\\n icon: createSkillIcon(\\\"figma\\\"),\\n },\\n {\\n label: \\\"GitHub\\\",\\n icon: createSkillIcon(\\\"github\\\"),\\n },\\n {\\n label: \\\"Database\\\",\\n icon: createSkillIcon(\\\"database\\\"),\\n },\\n];\\n\\nconst skillOrbitConfig = {\\n radius: 92,\\n duration: 18,\\n showPath: true,\\n followCursor: true,\\n};\\n\\nconst skillOrbitRoot = document.querySelector(\\\"#skillOrbitShowcase\\\");\\n\\nfunction createSkillIcon(name) {\\n const icons = {\\n globe: `\\n \\n `,\\n braces: `\\n \\n `,\\n wind: `\\n \\n `,\\n figma: `\\n \\n `,\\n github: `\\n \\n `,\\n database: `\\n \\n `,\\n layers: `\\n \\n `,\\n };\\n\\n return icons[name] || \\\"\\\";\\n}\\n\\nfunction createSkillOrbit({\\n items,\\n centerIcon,\\n caption,\\n radius = 92,\\n duration = 18,\\n showPath = true,\\n followCursor = true,\\n}) {\\n const group = document.createElement(\\\"div\\\");\\n group.className = \\\"skill-orbit-group\\\";\\n\\n const orbit = document.createElement(\\\"div\\\");\\n orbit.className = \\\"skill-orbit\\\";\\n orbit.style.setProperty(\\\"--skill-radius\\\", `${radius}px`);\\n orbit.style.setProperty(\\\"--skill-duration\\\", `${duration}s`);\\n\\n if (showPath) {\\n const path = document.createElement(\\\"div\\\");\\n path.className = \\\"skill-orbit-path\\\";\\n orbit.appendChild(path);\\n }\\n\\n const avatar = document.createElement(\\\"div\\\");\\n avatar.className = \\\"skill-orbit-avatar\\\";\\n avatar.innerHTML = centerIcon;\\n orbit.appendChild(avatar);\\n\\n // Animation state for continuous rotation and return-to-zero\\n let rotationAngle = 0;\\n let isHovered = false;\\n let returnTransitionStartTime = null;\\n let startRotationAngle = 0;\\n const rotationSpeed = 360 / (duration * 1000); // degrees per millisecond\\n const RETURN_DURATION = 500; // ms to return to 0 degrees\\n let lastTimestamp = null;\\n let animationFrameId = null;\\n\\n function tick(timestamp) {\\n if (!lastTimestamp) lastTimestamp = timestamp;\\n const elapsed = timestamp - lastTimestamp;\\n lastTimestamp = timestamp;\\n\\n if (isHovered) {\\n rotationAngle = (rotationAngle + rotationSpeed * elapsed) % 360;\\n orbit.style.setProperty(\\n \\\"--skill-current-rotation\\\",\\n `${rotationAngle}deg`,\\n );\\n orbit.style.setProperty(\\n \\\"--skill-current-reverse-rotation\\\",\\n `${-rotationAngle}deg`,\\n );\\n } else if (orbit.classList.contains(\\\"is-leaving\\\")) {\\n if (!returnTransitionStartTime) {\\n returnTransitionStartTime = timestamp;\\n startRotationAngle = rotationAngle;\\n }\\n\\n const returnElapsed = timestamp - returnTransitionStartTime;\\n const progress = Math.min(returnElapsed / RETURN_DURATION, 1);\\n const easeProgress = 1 - Math.pow(1 - progress, 3); // easeOutCubic\\n\\n const currentAngle = startRotationAngle * (1 - easeProgress);\\n orbit.style.setProperty(\\\"--skill-current-rotation\\\", `${currentAngle}deg`);\\n orbit.style.setProperty(\\n \\\"--skill-current-reverse-rotation\\\",\\n `${-currentAngle}deg`,\\n );\\n\\n if (progress >= 1) {\\n orbit.classList.remove(\\\"is-leaving\\\");\\n orbit.classList.add(\\\"is-collapsing\\\");\\n rotationAngle = 0;\\n returnTransitionStartTime = null;\\n\\n const totalCollapseDuration = 520 + (items.length - 1) * 45;\\n setTimeout(() => {\\n if (!isHovered && !orbit.classList.contains(\\\"is-leaving\\\")) {\\n orbit.classList.remove(\\\"is-collapsing\\\");\\n }\\n }, totalCollapseDuration);\\n }\\n }\\n\\n animationFrameId = requestAnimationFrame(tick);\\n }\\n\\n // Request the first frame of animation\\n animationFrameId = requestAnimationFrame(tick);\\n\\n items.forEach((item, index) => {\\n const angle = (360 / items.length) * index - 90;\\n const delay = index * 45;\\n const closeDelay = (items.length - 1 - index) * 45;\\n\\n const orbitItem = document.createElement(\\\"div\\\");\\n orbitItem.className = \\\"skill-orbit-item\\\";\\n orbitItem.style.setProperty(\\\"--skill-angle\\\", `${angle}deg`);\\n orbitItem.style.setProperty(\\\"--skill-reverse-angle\\\", `${-angle}deg`);\\n orbitItem.style.setProperty(\\\"--skill-delay\\\", `${delay}ms`);\\n orbitItem.style.setProperty(\\\"--skill-close-delay\\\", `${closeDelay}ms`);\\n\\n const orbitPosition = document.createElement(\\\"div\\\");\\n orbitPosition.className = \\\"skill-orbit-position\\\";\\n\\n const orbitUpright = document.createElement(\\\"div\\\");\\n orbitUpright.className = \\\"skill-orbit-upright\\\";\\n\\n const chip = document.createElement(\\\"div\\\");\\n chip.className = \\\"skill-orbit-chip\\\";\\n chip.innerHTML = `${item.icon || \\\"\\\"}${item.label}`;\\n\\n orbitUpright.appendChild(chip);\\n orbitPosition.appendChild(orbitUpright);\\n orbitItem.appendChild(orbitPosition);\\n orbit.appendChild(orbitItem);\\n });\\n\\n if (followCursor) {\\n orbit.addEventListener(\\\"pointerenter\\\", () => {\\n isHovered = true;\\n returnTransitionStartTime = null;\\n orbit.classList.remove(\\\"is-leaving\\\", \\\"is-collapsing\\\");\\n orbit.classList.add(\\\"is-active\\\");\\n });\\n\\n orbit.addEventListener(\\\"pointermove\\\", (event) => {\\n if (!isHovered) return;\\n const rect = orbit.getBoundingClientRect();\\n const centerX = rect.left + rect.width / 2;\\n const centerY = rect.top + rect.height / 2;\\n\\n const x = (event.clientX - centerX) / (rect.width / 2);\\n const y = (event.clientY - centerY) / (rect.height / 2);\\n\\n orbit.style.setProperty(\\\"--cursor-x\\\", `${x * 5}px`);\\n orbit.style.setProperty(\\\"--cursor-y\\\", `${y * 5}px`);\\n orbit.style.setProperty(\\\"--tilt-x\\\", `${y * -5}deg`);\\n orbit.style.setProperty(\\\"--tilt-y\\\", `${x * 5}deg`);\\n });\\n\\n orbit.addEventListener(\\\"pointerleave\\\", () => {\\n isHovered = false;\\n orbit.classList.remove(\\\"is-active\\\");\\n orbit.classList.add(\\\"is-leaving\\\");\\n returnTransitionStartTime = null;\\n\\n orbit.style.setProperty(\\\"--cursor-x\\\", \\\"0px\\\");\\n orbit.style.setProperty(\\\"--cursor-y\\\", \\\"0px\\\");\\n orbit.style.setProperty(\\\"--tilt-x\\\", \\\"0deg\\\");\\n orbit.style.setProperty(\\\"--tilt-y\\\", \\\"0deg\\\");\\n });\\n }\\n\\n group.appendChild(orbit);\\n\\n return group;\\n}\\n\\nfunction renderSkillOrbitShowcase() {\\n skillOrbitRoot.innerHTML = \\\"\\\";\\n\\n const iconOrbit = createSkillOrbit({\\n items: ICON_SKILL_ITEMS,\\n centerIcon: createSkillIcon(\\\"layers\\\"),\\n radius: skillOrbitConfig.radius,\\n duration: skillOrbitConfig.duration,\\n showPath: skillOrbitConfig.showPath,\\n followCursor: skillOrbitConfig.followCursor,\\n });\\n\\n skillOrbitRoot.appendChild(iconOrbit);\\n}\\n\\nrenderSkillOrbitShowcase();\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/styles.css","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"3291c37c-944c-4f96-a42f-e516c3ee6f02","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"a0e33282-c2a7-4828-8705-ba5b19a44079","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"7c3c9c12-1b6a-4cf4-b9eb-a2fe0a4901ab","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"815f26f4-5478-489d-89e2-de341d1eabe3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]