A visually driven landing page concept for LOMURA, a fictional furniture brand focused on chairs and sofas. Built to explore rich scroll-based interactions and 3D product presentation on the web.
LOMURA.mp4
(demo video also available in the repo — see \public\LOMURA-VIDEO.mp4)
LOMURA is a single-page interactive experience that blends motion design, SVG animation, and 3D rendering to create a premium, editorial feel — the kind of experience you'd expect from a high-end furniture or lifestyle brand.
The page moves through several distinct sections, each with its own interaction pattern:
- Hero carousel — an animated intro carousel at the top of the page
- Pinned scroll reveal — large text fragments animate in from randomized positions and converge into a centered headline as the user scrolls, combined with SVG line-draw animations
- Zoom lens — a floating lens element that reveals a magnified view of chair product shots on hover/scroll
- 3D model showcase — an interactive Three.js chair model that animates through key design details as the user scrolls through the section
- Product cards — chair cards with an on-hover SVG draw effect that builds a dynamic background and reveals product text, reverting cleanly on mouse leave
- Animated navbar — text-based hover/entry animations
- Footer — subtle closing motion detail to bookend the page
- Framework: Next.js (App Router) + TypeScript
- Animation: GSAP (ScrollTrigger, DrawSVG)
- Smooth Scrolling: Lenis
- 3D: Three.js
- Styling: Tailwind CSS
git clone https://github.com/ayushawasthi246-dev/LOMURA.git
cd lomura
npm install
npm run devOpen http://localhost:3000 to view it locally.
lomura/
├── app/
├── components/
├── context/
├── public/
├── Arrow/
├── Chairs/
├── ChairsFullImages/
├── LandingPageImages/
├── Sticker/
├── animationSVG.svg
└── generic_modern_chair.glb
- Desktop-first: the layout and interactions are currently optimized for larger viewports. A responsive pass for tablet/mobile is planned.
- Assets: LOMURA is a fictional brand created for this project; product imagery and 3D assets are used for demonstration purposes only.
- Not deployed: this project is not currently hosted live. A full walkthrough video is included in the repo to showcase the interactions in action.
- 3D Model: "Generic Modern Chair" by iJacques, licensed under CC Attribution.
- Product Imagery: Reference images sourced from Pinterest for demonstration purposes only. All rights belong to their original owners/photographers.
The code in this repository is shared for portfolio and reference purposes — feel free to explore it, but please don't reuse the LOMURA branding as-is. The 3D model and imagery are not original assets and are not covered by this project's license; refer to the original creators/sources above for their respective usage rights.