Ciasmos
DESCRIPTION
Avant-Garde Visual Art & Branding House Website
DURATION
Mar 2026 - Apr 2026
MY ROLE
- Web Designer & Developer: Derived the overall high-end minimalism visual concept and led UI/UX design.
- Frontend Development: Next.js architecture design and full frontend implementation.
- Motion Direction: Designed precise scroll timing and transition animations using GSAP and Lenis.
- Backend Integration: Implemented contact form backend logic via 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 web project that goes beyond a simple agency portfolio, translating the studio's philosophy of fusing haute couture aesthetics with a radical brand identity into a digital experience. Aligned with the brand's identity in fashion film and editorial photography, the site was built to let users experience the browser itself as a high-end magazine — through generous whitespace, oversized typography, and elegant transitions.
Scope
- · High-end Interactive Web Design & Frontend Development
- · Portfolio Archive System
- · Custom Scroll Animation Implementation
Key Technical Features
Cinematic Scroll Experience
- · Smooth Scroll Integration: Lenis eliminates the jarring feel of native scroll, delivering a physics-based, weighty scroll experience that maximizes visual immersion.
- · Horizontal & Vertical Flow: GSAP ScrollTrigger enables a dynamic layout where vertical scroll naturally transitions into horizontal movement to navigate portfolio years.
Immersive Interaction System
- · Subtle Parallax & Reveal: Micro-parallax and mask reveal animations applied as images enter the viewport, breathing life into static imagery.
- · Micro-interactions: Custom cursor reacting to mouse movement and subtle text hover transitions deliver the refined detail characteristic of high-end websites.
Minimalist Data Integration
- · Seamless Contact Form: The inquiry form accompanied by 'Let's craft a visual legacy.' strips away unnecessary elements. Submitted data is reliably transmitted via Supabase integration.
- · Optimized Asset Loading: Next.js image optimization and Lazy Loading applied to ensure rendering performance across the many high-resolution editorial photos.
Design Points
Avant-Garde Typography
Classic and elegant serif typefaces are placed at a scale that fills the viewport, creating a visual sense of overwhelm and luxury simultaneously.
Editorial Layout
A warm off-white background with deep black text contrast as the base, combined with an asymmetric grid and generous negative space, constructs a gallery environment where the work itself commands complete focus.
Refined Identity
True to the brand vision 'Orchestrating the chaos of imagination into cinematic order', a minimalist design stance is maintained while letter-spacing and line-height are delicately calibrated throughout.