Shamoni
Heroheropage_type: landing2026-05-21
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:
@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 (
<motion.div
className="orbit-item"
style={{
width: itemSizeValue,
height: itemSizeValue,
offsetPath,
offsetRotate: '0deg',
offsetAnchor: 'center center',
offsetDistance,
scale: itemScale,
zIndex: useTransform(itemScale, s => Math.round(s * 100)),
pointerEvents: 'auto'
}}
>
<motion.div style={{ transform: useTransform(rotationValue, r => `rotate(${-r}deg)`), width: '100%', height: '100%' }}>{item}</motion.div>
</motion.div>
);
}
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) => (
<motion.img
key={src}
src={src}
alt={`${altPrefix} ${index + 1}`}
draggable={false}
className="orbit-image"
whileHover={{ scale: 1.2 }}
transition={{ duration: 0.3 }}
style={{ cursor: "pointer", pointerEvents: "auto" }}
/>
));
return (
<div ref={containerRef} className={`orbit-container ${className}`} style={{ width: containerWidth, height: containerHeight, aspectRatio: responsive ? '1 / 1' : undefined }} aria-hidden="true">
<div className={responsive ? 'orbit-scaling-container orbit-scaling-container--responsive' : 'orbit-scaling-container'} style={{ width: responsive ? baseWidth : '100%', height: responsive ? baseWidth : '100%', transform: responsive ? `translate(-50%, -50%) scale(${scale})` : undefined }}>
<motion.div className="orbit-rotation-wrapper" style={{ rotate: currentRotation, x: currentTranslateX }}>
{showPath && (
<svg width="100%" height="100%" viewBox={`0 0 ${baseWidth} ${baseWidth}`} className="orbit-path-svg">
<path d={pathValue.get()} fill="none" stroke={pathColor} strokeWidth={pathWidth / scale} />
</svg>
)}
{items.map((item, index) => (
<OrbitItem key={index} item={item} index={index} totalItems={items.length} pathValue={pathValue} itemSizeValue={currentItemSize} rotationValue={currentRotation} progress={activeProgress} fill={fill} scaleStrength={focusStrength} focalPoint={50} />
))}
</motion.div>
</div>
{centerContent && <div className="orbit-center-content">{centerContent}</div>}
</div>
);
}
4. Main Page App Component (src/App.tsx)
Implement the exact layout, UI timelines (scrollYProgress transforms), background <video>, typography mask, and the heavily orchestrated Framer Motion timeline values. Do not change any numbers in the arrays.
code
Tsx
import { motion, useMotionTemplate, useScroll, useTransform, useAnimationFrame, useMotionValue } from 'motion/react';
import { useRef } from 'react';
import OrbitImages from './components/OrbitImages';
const orbitImagesData = [
"https://res.cloudinary.com/daklr2whx/image/upload/v1776966860/202604232047_gxyqne.jpg",
"https://res.cloudinary.com/daklr2whx/image/upload/v1776966856/202604232052_ihyslg.jpg",
"https://res.cloudinary.com/daklr2whx/image/upload/v1776966299/15112343_tuzrbg.jpg",
"https://res.cloudinary.com/daklr2whx/image/upload/v1776966299/202604232043_vhb6u9.jpg",
"https://res.cloudinary.com/daklr2whx/image/upload/v1776967124/02604232058_nh1qd1.jpg",
"https://res.cloudinary.com/daklr2whx/image/upload/v1776967611/202604232105_lv3fhp.jpg",
];
export default function App() {
const containerRef = useRef<HTMLDivElement>(null);
const { scrollYProgress } = useScroll({
target: containerRef,
offset: ["start start", "end end"]
});
const rx = useTransform(scrollYProgress, [0, 0.08, 1], ["0%", "55%", "55%"]);
const ry = useTransform(scrollYProgress, [0, 0.08, 1], ["0%", "55%", "55%"]);
const clipPath = useMotionTemplate`ellipse(${rx} ${ry} at 50% 50%)`;
const textOpacity = useTransform(scrollYProgress, [0.03, 0.08, 0.15, 0.22, 0.90, 0.98, 1], [0, 1, 1, 0, 0, 1, 1]);
const textBlurVal = useTransform(scrollYProgress, [0.03, 0.08, 0.15, 0.22, 0.90, 0.98, 1], [15, 0, 0, 15, 15, 0, 0]);
const filterText = useMotionTemplate`blur(${textBlurVal}px)`;
const yElement = useTransform(scrollYProgress, [0.03, 0.08, 0.15, 0.22, 0.90, 0.98, 1], [20, 0, 0, 20, 20, 0, 0]);
const targetRadius = 650;
const orbitItemSize = useTransform(scrollYProgress, [0.15, 0.25, 0.85, 0.95, 1], [80, 520, 520, 80, 80]);
const orbitRx = useTransform(scrollYProgress, [0.15, 0.25, 0.85, 0.95, 1], [330, targetRadius, targetRadius, 330, 330]);
const orbitRy = useTransform(scrollYProgress, [0.15, 0.25, 0.85, 0.95, 1], [140, targetRadius, targetRadius, 140, 140]);
const orbitRotation = useTransform(scrollYProgress, [0.15, 0.25, 0.85, 0.95, 1], [-15, 0, 0, -15, -15]);
const orbitTx = useTransform(scrollYProgress, [0.15, 0.25, 0.85, 0.95, 1], [0, -targetRadius, -targetRadius, 0, 0]);
const focusStrength = useTransform(scrollYProgress, [0.15, 0.25, 0.85, 0.95, 1], [0, 1, 1, 0, 0]);
const orbitProgress = useMotionValue(0);
const prevScroll = useRef(0);
useAnimationFrame((time, delta) => {
const pos = scrollYProgress.get();
const scrollDelta = pos - prevScroll.current;
prevScroll.current = pos;
let frameSpeed = 0;
if (pos > 0.15 && pos < 0.85) {
frameSpeed = (scrollDelta * 200);
} else {
frameSpeed = (delta / 1000) * 2.5;
}
orbitProgress.set(orbitProgress.get() + frameSpeed);
});
return (
<div ref={containerRef} className="relative w-full h-[600vh] bg-black">
<div className="sticky top-0 w-full h-screen overflow-hidden text-white">
<video autoPlay loop muted playsInline className="absolute inset-0 w-full h-full object-cover z-0">
<source src="https://res.cloudinary.com/daklr2whx/video/upload/v1776960333/a_kitten_drinks_202604231827_apoc3w.mp4" type="video/mp4" />
</video>
<div className="absolute inset-0 bg-black/10 z-0"></div>
<div className="absolute z-10 w-[80vw]" style={{ left: '3vw', bottom: '3vw' }}>
<svg viewBox="0 10 350 72" className="w-full h-auto drop-shadow-2xl overflow-visible" preserveAspectRatio="xMinYMax meet">
<text x="-3" y="80" fontFamily="'Instrument Serif', serif" fill="#FDFFB7" className="select-none">
<tspan fontSize="90">Shamoni</tspan>
<tspan fontSize="28.8" dx="4" dy="-40">©</tspan>
</text>
</svg>
</div>
<motion.div
className="absolute z-20 flex items-center justify-center overflow-hidden"
style={{ clipPath, rotate: -15, width: '150vw', height: '150vh', left: '-25vw', top: '-25vh' }}
>
<div className="absolute inset-0 bg-white" />
<div className="relative flex flex-col items-center justify-center" style={{ width: '100vw', height: '100vh', transform: 'rotate(15deg)' }}>
<motion.div className="w-[90vw] max-w-[1200px] aspect-square relative z-0">
<OrbitImages
images={orbitImagesData}
shape="ellipse"
direction="normal"
duration={40}
fill={true}
showPath={false}
responsive={true}
baseWidth={800}
progressOverride={orbitProgress}
radiusXOverride={orbitRx}
radiusYOverride={orbitRy}
itemSizeOverride={orbitItemSize}
rotationOverride={orbitRotation}
translateXOverride={orbitTx}
focusStrength={focusStrength}
/>
</motion.div>
</div>
</motion.div>
<div className="absolute inset-0 z-[60] pointer-events-none">
<div className="absolute top-[48%] left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none z-50">
<motion.div
className="flex flex-col items-center whitespace-nowrap pointer-events-auto"
style={{ filter: filterText, opacity: textOpacity, WebkitFontSmoothing: 'antialiased', WebkitBackfaceVisibility: 'hidden', transform: 'translateZ(0)' }}
>
<div className="flex items-baseline text-black leading-none mb-1">
<span className="font-serif text-[45px] md:text-[55px] italic tracking-tight text-black">M</span>
<span className="font-serif text-[45px] md:text-[55px] tracking-tight text-black">aster the Elements</span>
</div>
<span className="font-sans text-[28px] md:text-[36px] tracking-tight text-black mt-[-5px]">embrace</span>
</motion.div>
</div>
<motion.div
className="absolute top-32 right-[calc(6vw+150px)] md:right-[214px] flex flex-col items-start text-left pointer-events-auto cursor-text"
style={{ y: yElement, filter: filterText, opacity: textOpacity }}
>
<span className="font-serif text-[40px] leading-none mb-3 text-black">2K26</span>
<span className="font-serif text-[16px] uppercase tracking-widest text-black leading-[20px] text-left">
JOIN AN EXCLUSIVE<br />COMMUNITY
</span>
</motion.div>
<motion.div
className="absolute bottom-8 left-8 md:bottom-16 md:left-16 flex flex-col items-start text-black pointer-events-auto cursor-text"
style={{ y: yElement, filter: filterText, opacity: textOpacity }}
>
<span className="font-serif text-[40px] leading-none mb-1 text-black">0651</span>
<span className="font-serif text-[16px] uppercase tracking-widest text-black">COLLECTION</span>
</motion.div>
<div className="absolute bottom-16 right-[6vw] md:right-[10vw] flex flex-col items-start z-10 pointer-events-auto">
<motion.p
className="font-serif text-[16px] uppercase tracking-widest text-black leading-[20px] mb-6 text-left w-[240px] cursor-text"
style={{ y: yElement, filter: filterText, opacity: textOpacity }}
>
JOIN AN EXCLUSIVE COMMUNITY OF SAILORS. WHETHER YOU CRAVE THE THRILL OF THE OPEN
</motion.p>
<motion.div className="flex gap-0 pointer-events-auto items-center" style={{ y: yElement, filter: filterText, opacity: textOpacity }}>
<button className="bg-black hover:bg-black/90 transition-colors text-white rounded-[40px] px-8 py-3.5 font-serif tracking-[0.1em] uppercase text-[12px] md:text-[14px] z-10">
BUY COLLECTION
</button>
<button className="bg-black hover:bg-black/90 transition-colors w-[46px] h-[46px] flex items-center justify-center rounded-[50%] text-white -ml-2 z-0">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="ml-1">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</button>
</motion.div>
</div>
</div>
<motion.header
className="fixed top-0 left-0 w-full p-6 md:p-10 flex justify-between items-start z-[100] pointer-events-none"
style={{ opacity: textOpacity, filter: filterText }}
>
<div className="flex items-start text-black select-none leading-none pointer-events-auto" style={{ fontFamily: "'Instrument Serif', serif", WebkitFontSmoothing: "antialiased" }}>
<span style={{ fontSize: '40px' }}>Shamoni</span>
<span style={{ fontSize: '14px', marginLeft: '4px', marginTop: '4px' }}>©</span>
</div>
<button className="group relative flex items-center justify-center w-[72px] h-[44px] hover:scale-105 transition-transform duration-300 cursor-pointer pointer-events-auto" aria-label="Menu">
<div className="absolute inset-0 bg-black rounded-[50%] -rotate-15"></div>
<svg className="relative z-10" width="24" height="10" viewBox="0 0 24 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1H23M1 9H23" stroke="white" strokeWidth="2" strokeLinecap="round" />
</svg>
</button>
</motion.header>
</div>
</div>
);
}