"use client"; import React, { useEffect, useRef, useState } from "react"; import { motion, useScroll, useTransform, useSpring, useMotionValueEvent, AnimatePresence, } from "framer-motion"; import Lenis from "lenis"; import { ArrowRight, ArrowDown, Sparkles, MoveRight } from "lucide-react"; // --- ASSETS --- export const IMAGES = { hero: "https://images.unsplash.com/photo-1469334031218-e382a71b716b?q=80&w=2670&auto=format&fit=crop", model1: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=1000&auto=format&fit=crop", arch1: "https://images.unsplash.com/photo-1600607686527-6fb886090705?q=80&w=2000&auto=format&fit=crop", fashion: "https://images.unsplash.com/photo-1483985988355-763728e1935b?q=80&w=2000&auto=format&fit=crop", object: "https://images.unsplash.com/photo-1513519245088-0e12902e5a38?q=80&w=2000&auto=format&fit=crop" }; // --- COMPONENTS --- // 1. Smooth Scroll Setup export function SmoothScroll({ children }: { children: React.ReactNode }) { useEffect(() => { const lenis = new Lenis({ duration: 1.5, // Slower, heavier feel for "reading" easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), orientation: "vertical", gestureOrientation: "vertical", smoothWheel: true, }); function raf(time: number) { lenis.raf(time); requestAnimationFrame(raf); } requestAnimationFrame(raf); return () => lenis.destroy(); }, []); return <>{children}; }; // 2. Animated Divider Line export function Separator() { return ( ); } // 3. Navigation (Minimal Magazine Header) export function Navbar() { const [hidden, setHidden] = useState(false); const { scrollY } = useScroll(); useMotionValueEvent(scrollY, "change", (latest) => { const previous = scrollY.getPrevious() || 0; if (latest > previous && latest > 150) setHidden(true); else setHidden(false); }); return (

Issue 24 September The Earth Edit

THE EDIT.

) } // 4. Hero: Full Bleed with Typography export function Hero() { const { scrollY } = useScroll(); const y = useTransform(scrollY, [0, 800], [0, 300]); const opacity = useTransform(scrollY, [0, 600], [1, 0]); return (

Cover Story

Silent
Dialogue

Explores the unseen connection between human emotion and the environments we inhabit. A visual essay.

) } // 5. Editorial Layout (Sticky Side) export function EditorialSection() { return (

{/* Left: Sticky Sidebar (Meta Info) */}

Photographer

Elena Vora

Location

Kyoto, Japan

Chapter

{/* Right: The Article */}

W e often forget that silence is not empty. It is full of answers. In the rush of the modern digital landscape, the ability to pause has become the ultimate luxury.

The architecture of the space was designed to disappear. Walls that do not enclose, but suggest. Light that does not strike, but caresses. This is the new definition of luxury—not gold or marble, but time and light.

Our team spent three weeks in the mountains, documenting the way the sun moves across the tatami mats. The result is not just a collection of images, but a meditation on the passage of time itself.

"Light is the first of all painters."

) } // Helper for image inside editorial export function ParallaxImage({ src, alt, speed = 0.1 }: { src: string, alt: string, speed?: number }) { const ref = useRef(null); const { scrollYProgress } = useScroll({ target: ref, offset: ["start end", "end start"] }); const y = useTransform(scrollYProgress, [0, 1], ["-10%", "10%"]); return (

) } // 6. Horizontal Scroll "Film Strip" export function HorizontalGallery() { const targetRef = useRef(null); const { scrollYProgress } = useScroll({ target: targetRef }); const x = useTransform(scrollYProgress, [0, 1], ["0%", "-60%"]); return (

The
Collection

{[IMAGES.fashion, IMAGES.object, IMAGES.hero, IMAGES.arch1].map((src, i) => (

Look 0{i + 1}

View Details

))} {/* End Card */}

All Looks

) } // 7. Big Footer export function Footer() { return ( ) }

The Collection

The
Collection

Property	Type	Default	Description
primaryColor	string	#000000	Primary text color.
accentColor	string	#d4af37	Sophisticated accent color (gold).
fontFamily	string	serif	Editorial font family.
contentWidth	string	max-w-4xl	Content width for focused layout.

The Edit

Props