The Floating Soul Interactive E-book Landing Page

Project: The Floating Soul Type: E-book landing page with interactive storytelling experience Stack: React, Tailwind CSS v4, Motion (motion/react), React Router, react-helmet-async, Cloudinary

Overview The Floating Soul required more than a standard book landing page. It needed an experience that matched the emotional texture of the work itself.

Design System & Visual Identity The visual identity is built around two deliberate type pairings: Plus Jakarta Sans for UI legibility and Caveat for handwritten warmth. The accent color, crimson #9D2235, grounds the palette with quiet urgency without competing with content.

Dark and light modes are treated as equal first-class citizens rather than an afterthought toggle, ensuring the experience feels intentional at either setting.

The hero features a ChapterHeroGrid.tsx component housing pastel cards that respond to cursor position in 3D space. The interactive-engine.tsx handles pointer tracking and applies perspective transforms via Motion's spring physics, giving cards a physical weight that static design cannot convey.

Elastic Custom Cursor: A custom cursor component replaces the system cursor with an elastic follower that lags behind the pointer using spring easing. It scales and morphs on hover states over interactive elements, reinforcing the tactile quality of the interface without distracting from content.

Chapter Index with Video Trailers: All 12 chapter video trailers are embedded in ChapterIndex.tsx with hover-to-play behavior. A custom maximize button triggers fullscreen at a constrained 720px to preserve quality. Download prevention is enforced at the element level.

SEO react-helmet-async is applied across all routes: the landing page, /the-floating-soul (prologue), /chapters, /chapters/:chapterId, and /contact. Each page receives unique , and Open Graph tags appropriate to its content.