Ciaosmos
DESCRIPTION
Avant-Garde Visual Art & Branding House Website
DURATION
Mar 2026 - Apr 2026
MY ROLE
- Web Design & Development: high-end minimal visual concept and UI/UX direction.
- Frontend Development: Next.js architecture and the full frontend build.
- Motion Direction: scroll timing and transition choreography in GSAP and Lenis.
- Backend Integration: contact form logic on Supabase.
TECH
Next.js (App Router) · TypeScript · Tailwind CSS · CSS Modules
GSAP · ScrollTrigger · Lenis
Supabase
Vercel
Project Purpose
"Orchestrating the chaos of imagination into cinematic order." CIAOSMOS is a fashion film and editorial photography studio whose work is couture-adjacent and deliberately unruly. The site had to hold both halves of that. Oversized type, wide margins and unhurried transitions turn the browser window into a magazine spread — the chaos stays in the images, the order is in the grid around them.
Scope
- · High-end Interactive Web Design & Frontend Development
- · Portfolio Archive System
- · Custom Scroll Animation Implementation
Key Technical Features
Cinematic Scroll Experience
- · Lenis replaces native scroll with something weighted and physical, which is what keeps a page this sparse from feeling empty.
- · GSAP ScrollTrigger hands vertical scroll over to horizontal movement to travel through portfolio years, without the visitor having to change gesture.
Immersive Interaction System
- · Micro-parallax and mask reveals bring images in as they cross the viewport, so still photography arrives with movement.
- · A custom cursor and slow text hover transitions supply the small, deliberate details that separate a high-end site from a template.
Minimalist Data Integration
- · The inquiry form carries one line — 'Let's craft a visual legacy.' — and nothing else. Submissions land in Supabase.
- · Next.js image optimization and lazy loading keep rendering steady across a page built almost entirely from high-resolution editorial photography.
Design Points
Avant-Garde Typography
A classic serif set large enough to fill the viewport, so the first thing the visitor registers is scale rather than information.
Editorial Layout
Warm off-white under deep black text, on an asymmetric grid with enough negative space that each piece of work is looked at on its own.
Refined Identity
Minimal throughout, with letter-spacing and line-height tuned by hand — the discipline the studio's own vision statement asks for.
Gallery
Click to enlargeFAQ
How is a 3D interactive website different from a regular one?
It runs Three.js and WebGL in the browser, so objects move and respond to the cursor and scroll. A regular site organises information; an interactive one delivers the brand as an experience. It pays off most in fashion, beauty, architecture and exhibitions.
How long does a website take to build?
Seven days for a landing page, fifteen for a five-page company site, thirty for a ten-page 3D interactive build. The clock starts when your material arrives and shifts with design feedback. If a date is fixed, say so at the first call and feasibility is checked first.
Are hosting, domain and server costs separate?
SSL certificate, hosting setup and database provisioning are included at no cost. You only pay for the domain, about ₩20,000–30,000 a year. Accounts are created in your name from the start, so nothing lapses when staff change.
Can I edit the content myself after launch?
An admin page is built alongside the site, so text, images and posts can be edited without development knowledge, and a manual is handed over at delivery. Only structural changes or new features need development.