008 · PROJECT
Cólneot
A FICTIONAL FASHION-ILLUSTRATION HOUSE, BUILT AS AN INTERACTION STUDY
FASHIONS FADE. STYLE IS ETERNAL.
OVERVIEW
Cólneot is a concept fashion-illustration house I used as the canvas for a focused study in web motion. It began as a teardown of a classic menu-and-slider interaction, which I rebuilt from scratch in vanilla JS, no page builder, and then art-directed into an editorial fashion brand with its own wordmark, five-tone palette and croquis gallery. The brief I set myself was continuity: nothing on the page should "pop" into existence; every state should travel to the next.
That idea drives the whole experience. The site opens on a full-screen landing where the wordmark fades up and settles, and on click it doesn't cut away: the same wordmark physically flies and scales into its final slot in the top-left nav while the homepage zooms in behind it, one continuous shared-element move. The gallery works the same way: click any croquis and that exact image lifts out of the slider and travels to the left of a detail page as the surroundings zoom out and a "process" write-up staggers in on the right; closing plays the whole flight in reverse, back into its slot.
The smaller details carry the same intent: a two-part custom cursor that swells into a "DRAG" ring over the slider and a light ring over the arrows, a full-screen menu that reveals behind a rendered wave with its links rising in sequence, and a colour system applied on a strict hierarchy so the warm accent never competes with the ink. Everything is hand-built and framework-free, then shipped static to Vercel.
HIGHLIGHTS
- Shared-element intro: the wordmark enters with a slow fade-and-rise, then FLIPs into the nav logo while the page zooms in, measured so the landing is pixel-exact, no cut
- Croquis viewer: clicking a sketch flies the real image from the slider into a detail page (art left, process copy right) and reverses cleanly on close
- Two-part custom cursor with contextual states: a "DRAG" ring on the gallery, a light ring on the controls
- Full-screen menu with a Lottie wave reveal, staggered link entrances and animated underlines
- A five-tone palette (beige · dark brown · golden tan · taupe · blue-gray) applied with a deliberate hierarchy across every surface and state
- Framework-free: hand-written transitions in CSS and the Web Animations API, degrading sensibly on smaller screens
STACK
Vanilla JS · Splide (slider) · lottie-web · CSS transitions + Web Animations API · Vercel
CREDITS
The fashion croquis shown in the gallery are illustrations by Miyuki Ohashi, used as placeholder artwork for this non-commercial interaction study. The motion design, layout, palette and front-end build are my own.