3D Cylinder Carousel

22:I[5034,["2260","static/chunks/2260-77a3f345bbc959a0.js","9356","static/chunks/9356-25b16f818c154d03.js","186","static/chunks/186-f0d420b86c8a5104.js","2879","static/chunks/2879-a133dff9dcb21fbb.js","5034","static/chunks/5034-0ef16291859fdba9.js","4995","static/chunks/app/(frontend)/%5Blocale%5D/(dashboard)/library/page-47aa2f755169809f.js"],"LibraryBrowser"] 23:T55b5,Build an immersive, highly interactive, scroll-driven landing page using React, Vite, Tailwind CSS (v4), and `motion/react` (Framer Motion). Please set up the application with the exact files, dependencies, URLs, CSS variables, and mathematical Framer Motion values provided below. ### Setup & Dependencies Install the following libraries: `npm install motion react react-dom lucide-react` `npm install -D tailwindcss @tailwindcss/vite` Ensure Tailwind V4 is correctly initialized via `@tailwindcss/vite` in `vite.config.ts`. --- ### 1. Global Styles (`src/index.css`) Import the necessary Google Fonts and set up the Tailwind V4 `@theme` overrides: ```css @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@300;400;500;600&family=Great+Vibes&display=swap'); @import "tailwindcss"; @theme { --font-serif: "Instrument Serif", serif; --font-sans: "Manrope", sans-serif; --font-script: "Great Vibes", cursive; } 2. Orbit Images Component Styles (src/components/OrbitImages.css) This CSS provides the absolute positioning offsets for our custom rotation gallery. code CSS .orbit-container { position: relative; margin-left: auto; margin-right: auto; } .orbit-scaling-container { width: 100%; height: 100%; position: relative; } .orbit-scaling-container--responsive { position: absolute; left: 50%; top: 50%; transform-origin: center center; } .orbit-rotation-wrapper { width: 100%; height: 100%; transform-origin: center center; position: relative; } .orbit-path-svg { position: absolute; inset: 0; pointer-events: none; } .orbit-item { position: absolute; will-change: transform; user-select: none; } .orbit-center-content { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 10; } .orbit-image { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; } 3. Orbit Images React Component (src/components/OrbitImages.tsx) Create this mathematically precise component that maps motion paths over SVG strings using offsetPath and offsetDistance. It accepts Framer Motion MotionValues as overrides to allow the parent App.tsx to infinitely control its radius, spread, item size, and rotation during scroll. code Tsx // @ts-nocheck import { useMemo, useEffect, useRef, useState } from 'react'; import { motion, useMotionValue, useTransform, animate, useMotionTemplate } from 'motion/react'; import './OrbitImages.css'; function generateEllipsePath(cx, cy, rx, ry) { return `M ${cx - rx} ${cy} A ${rx} ${ry} 0 1 0 ${cx + rx} ${cy} A ${rx} ${ry} 0 1 0 ${cx - rx} ${cy}`; } function generateCirclePath(cx, cy, r) { return generateEllipsePath(cx, cy, r, r); } function generateSquarePath(cx, cy, size) { const h = size / 2; return `M ${cx - h} ${cy - h} L ${cx + h} ${cy - h} L ${cx + h} ${cy + h} L ${cx - h} ${cy + h} Z`; } function generateRectanglePath(cx, cy, w, h) { const hw = w / 2; const hh = h / 2; return `M ${cx - hw} ${cy - hh} L ${cx + hw} ${cy - hh} L ${cx + hw} ${cy + hh} L ${cx - hw} ${cy + hh} Z`; } function generateTrianglePath(cx, cy, size) { const height = (size * Math.sqrt(3)) / 2; const hs = size / 2; return `M ${cx} ${cy - height / 1.5} L ${cx + hs} ${cy + height / 3} L ${cx - hs} ${cy + height / 3} Z`; } function generateStarPath(cx, cy, outerR, innerR, points) { const step = Math.PI / points; let path = ''; for (let i = 0; i < 2 * points; i++) { const r = i % 2 === 0 ? outerR : innerR; const angle = i * step - Math.PI / 2; const x = cx + r * Math.cos(angle); const y = cy + r * Math.sin(angle); path += i === 0 ? `M ${x} ${y}` : ` L ${x} ${y}`; } return path + ' Z'; } function generateHeartPath(cx, cy, size) { const s = size / 30; return `M ${cx} ${cy + 12 * s} C ${cx - 20 * s} ${cy - 5 * s}, ${cx - 12 * s} ${cy - 18 * s}, ${cx} ${cy - 8 * s} C ${cx + 12 * s} ${cy - 18 * s}, ${cx + 20 * s} ${cy - 5 * s}, ${cx} ${cy + 12 * s}`; } function generateInfinityPath(cx, cy, w, h) { const hw = w / 2; const hh = h / 2; return `M ${cx} ${cy} C ${cx + hw * 0.5} ${cy - hh}, ${cx + hw} ${cy - hh}, ${cx + hw} ${cy} C ${cx + hw} ${cy + hh}, ${cx + hw * 0.5} ${cy + hh}, ${cx} ${cy} C ${cx - hw * 0.5} ${cy + hh}, ${cx - hw} ${cy + hh}, ${cx - hw} ${cy} C ${cx - hw} ${cy - hh}, ${cx - hw * 0.5} ${cy - hh}, ${cx} ${cy}`; } function generateWavePath(cx, cy, w, amplitude, waves) { const pts = []; const segs = waves * 20; const hw = w / 2; for (let i = 0; i <= segs; i++) { const x = cx - hw + (w * i) / segs; const y = cy + Math.sin((i / segs) * waves * 2 * Math.PI) * amplitude; pts.push(i === 0 ? `M ${x} ${y}` : `L ${x} ${y}`); } for (let i = segs; i >= 0; i--) { const x = cx - hw + (w * i) / segs; const y = cy - Math.sin((i / segs) * waves * 2 * Math.PI) * amplitude; pts.push(`L ${x} ${y}`); } return pts.join(' ') + ' Z'; } function OrbitItem({ item, index, totalItems, pathValue, itemSizeValue, rotationValue, progress, fill, scaleStrength, focalPoint = 50 }) { const itemOffset = fill ? (index / totalItems) * 100 : 0; const offsetPercentage = useTransform(progress, (p) => { return (((p + itemOffset) % 100) + 100) % 100; }); const offsetDistance = useTransform(offsetPercentage, (p) => `${p}%`); const itemScale = useTransform(() => { const rawPos = offsetPercentage.get(); const strength = scaleStrength ? scaleStrength.get() : 0; let dist = Math.abs(rawPos - focalPoint); if (dist > 50) dist = 100 - dist; let targetScale = 1; if (dist < 20) { const ratio = dist / 20; const cosCurve = (Math.cos(ratio * Math.PI) + 1) / 2; targetScale = 0.4 + (cosCurve * 0.6); } else { targetScale = 0.4; } return 1 - strength * (1 - targetScale); }); const offsetPath = useMotionTemplate`path("${pathValue}")`; return ( Math.round(s * 100)), pointerEvents: 'auto' }} > `rotate(${-r}deg)`), width: '100%', height: '100%' }}>{item} ); } export default function OrbitImages({ images = [], altPrefix = 'Orbiting image', shape = 'ellipse', customPath, baseWidth = 1400, radiusX = 700, radiusY = 170, radius = 300, starPoints = 5, starInnerRatio = 0.5, rotation = -8, duration = 40, itemSize = 64, direction = 'normal', fill = true, width = 100, height = 100, className = '', showPath = false, pathColor = 'rgba(0,0,0,0.1)', pathWidth = 2, easing = 'linear', paused = false, centerContent, responsive = false, progressOverride, radiusXOverride, radiusYOverride, itemSizeOverride, rotationOverride, translateXOverride, focusStrength, }) { const containerRef = useRef(null); const [scale, setScale] = useState(1); const designCenterX = baseWidth / 2; const designCenterY = baseWidth / 2; const currentRadiusX = radiusXOverride || useMotionValue(radiusX); const currentRadiusY = radiusYOverride || useMotionValue(radiusY); const currentItemSize = itemSizeOverride || useMotionValue(itemSize); const currentRotation = rotationOverride || useMotionValue(rotation); const currentTranslateX = translateXOverride || useMotionValue(0); const pathValue = useTransform([currentRadiusX, currentRadiusY], ([rx, ry]) => { switch (shape) { case 'circle': return generateCirclePath(designCenterX, designCenterY, rx); case 'ellipse': return generateEllipsePath(designCenterX, designCenterY, rx, ry); case 'square': return generateSquarePath(designCenterX, designCenterY, rx * 2); case 'rectangle': return generateRectanglePath(designCenterX, designCenterY, rx * 2, ry * 2); case 'triangle': return generateTrianglePath(designCenterX, designCenterY, rx * 2); case 'star': return generateStarPath(designCenterX, designCenterY, rx, rx * starInnerRatio, starPoints); case 'heart': return generateHeartPath(designCenterX, designCenterY, rx * 2); case 'infinity': return generateInfinityPath(designCenterX, designCenterY, rx * 2, ry * 2); case 'wave': return generateWavePath(designCenterX, designCenterY, rx * 2, ry, 3); case 'custom': return customPath || generateCirclePath(designCenterX, designCenterY, rx); default: return generateEllipsePath(designCenterX, designCenterY, rx, ry); } }); useEffect(() => { if (!responsive || !containerRef.current) return; const updateScale = () => { if (!containerRef.current) return; setScale(containerRef.current.clientWidth / baseWidth); }; updateScale(); const observer = new ResizeObserver(updateScale); observer.observe(containerRef.current); return () => observer.disconnect(); }, [responsive, baseWidth]); const internalProgress = useMotionValue(0); useEffect(() => { if (paused || progressOverride) return; const controls = animate(internalProgress, direction === 'reverse' ? -100 : 100, { duration, ease: easing, repeat: Infinity, repeatType: 'loop', }); return () => controls.stop(); }, [internalProgress, duration, easing, direction, paused, progressOverride]); const activeProgress = progressOverride || internalProgress; const containerWidth = responsive ? '100%' : (typeof width === 'number' ? width : '100%'); const containerHeight = responsive ? 'auto' : (typeof height === 'number' ? height : (typeof width === 'number' ? width : 'auto')); const items = images.map((src, index) => ( )); return ( ); } 4. Main Page App Component (src/App.tsx) Implement the exact layout, UI timelines (scrollYProgress transforms), background

Shamoni

Creative Portfolio

Planet Orbit

404 Planet

Wellness Balance

Web3 EOS Hero

Transform Data

FinancialFocus

3D Jack Portfolio

spatial mapping platform

Cargo Group

New Era Automotive Hero

SpeakUp Venture Hero

Lumina

NovaDesk Signup

Synapse Dark Hero

Wealth Video Hero

Arceage Services

Velorah

EVR Ventures