Seiko Mod
Concept for an online watch store
An interactive watch store concept: cinematic scroll storytelling, a product catalog and a custom watch configurator. Built with HTML, CSS and JavaScript with AI-assisted development (Claude Code), under my creative and technical direction.
Independent concept, not affiliated with or commissioned by Seiko. In-memory cart only and simulated custom order: nothing is saved or sent.
Type
Independent concept
Status
Not publicly deployed
Main technologies
HTML5 · CSS3 · JavaScript · Canvas 2D
The project.
Seiko Mod is a personal concept for an online store selling custom-assembled automatic watches (“mods” built around Seiko NH-series movements: Datejust, GMT and diver styles), with fictional prices in Canadian dollars.
Its centerpiece is a cinematic, scroll-driven home page. The site also includes a filterable catalog, a product page, a cart drawer and a 9-step custom watch request with a preview of inspiration photos. It is a front-end-only project: there is no server, and the forms and checkout are simulated.
My role.
- 01Website concept and design
- 02Front-end development
- 03Interactive experience
- 04Scroll-driven animation
- 05Catalog experience
- 06Custom watch configurator
- 07Responsive design
- 08AI-assisted development with Claude Code
Key features.
- A 193-frame cinematic sequence driven by scrolling, with four crossfading text compositions and an intro that plays only once
- Catalog with collection filters (empty collections disabled), sorting and a result count
- A single product page template: spec sheet, accordions and similar products
- Cart drawer: add, quantity, remove and totals
- Instant search
- 9-step custom request: visual option cards, dial color swatches, drag-and-drop photos, per-step validation and a progress bar
- Responsive layout (1440, 1200, 992, 768 and 480 px) and a reduced-motion mode
Technologies.
Original site
- HTML5
- CSS3 (design tokens, Grid, Flexbox, clamp(), :has(), backdrop-filter)
- Vanilla JavaScript, no framework or dependency
- Canvas 2D
- requestAnimationFrame
- IntersectionObserver
- localStorage (cart)
- Google Fonts: Inter
Assets and tools
- WebP
- 193-frame sequence extracted from a 4K HEVC video
- Python 3 and Pillow (image preparation)
- In-browser test benches
Preview in this portfolio
- React
- TypeScript
- Next.js (App Router)
- CSS isolated with container queries
AI-assisted development. Claude Code as the assistant, with the direction on my side.
Claude Code was part of my workflow for implementation, iterations and debugging: it turned my direction (concept, layout, motion, copy structure, features) into code, which I then refined through successive rounds of review and feedback.
The concept, the design decisions, the revisions and the final experience are mine. I did not write every line of code by hand. The React and Next.js port shown here was also produced with Claude Code, from my existing site.
Highlights.
Frames instead of a video
The 4K HEVC source video was too slow to scrub while scrolling and wouldn’t play in Firefox. It was converted into WebP frames drawn on a canvas, lighter than the original video.
Smoothed scrolling
Scroll, progress, target frame: exponential smoothing in a single requestAnimationFrame loop, paused when off screen.
Text timed to the image
Each scene has its own readability veil, which appears just before the text. On a portrait screen, the image is drawn as a centered band.
A single accent color
A near-black background, a steel-blue glow taken from the background image and watches placed directly on the background, with no cards or borders.
Accessibility
Static mode with prefers-reduced-motion, hidden panels removed from the tab order and states exposed through ARIA.
Status
Not publicly deployed.
Seiko Mod is a portfolio project: it is only presented through the interactive preview on this page.
Good to know
- Independent portfolio project: it is not affiliated with, endorsed by or commissioned by Seiko Watch Corporation, and it is not client work for Seiko. The Seiko-branded watch images are only used to illustrate the idea; “Seiko” and related trademarks belong to their respective owners.
- In the preview, the cart stays in memory, the custom order is simulated and the photos you add never leave the browser.
Next project
All projectsGarderie Mes Meilleurs Souvenirs
Showcase website for an educational daycare
A warm, highly visual showcase website for an educational daycare, designed like an album of “printed memories”: photos as tilted prints, original illustrations and a palette drawn from the logo. Built with Astro and TypeScript in an AI-assisted workflow (Claude Code), under my creative direction.
