ELIXSOME
DESCRIPTION
Plant Derma Skincare — Brand Website
DURATION
Jun 2026 - Jul 2026
MY ROLE
- Full website planning and UI/UX design aligned to the brand identity.
- React responsive frontend publishing; scroll and WebGL interaction implementation.
- Full-stack build — Supabase admin CMS, consultation form, Korean SEO/prerendering, Vercel deployment.
TECH
React 19 · TypeScript · Vite 6 · Tailwind CSS v4
three.js · @react-three/fiber · GSAP · Lenis
Supabase (Auth · Postgres · Storage · RLS)
Vercel · Prerender (SSG)
Project Purpose
"From extreme nature, built for skin core resilience." ELIXSOME is a plant-derma skincare label built on exosomes extracted from the Ulleungdo chrysanthemum. The brief was explicitly not commerce: the site exists to carry philosophy and mood, organised around the idea that healthy skin begins with the skin core rather than the surface. Brand story, exosome science and the four-step ritual were assembled into a single immersive read, in a warm cream, deep navy, botanical green and soft gold palette closer to a modern apothecary than a cosmetics store.
Scope
- · Brand Website UI/UX Planning & Design
- · Responsive Frontend (React 19 · Vite · Tailwind v4)
- · WebGL Exosome Hero & Scroll Interaction
- · Supabase Admin CMS, Korean SEO & Prerendering
Key Technical Features
Interactive Exosome WebGL Hero
- · three.js and @react-three/fiber render a particle sphere standing in for the exosome itself.
- · Code splitting plus IntersectionObserver, visibilitychange and prefers-reduced-motion gating unmount the canvas entirely once it leaves the viewport — GPU load returns to zero rather than idling.
Scroll-driven Editorial Motion
- · Lenis inertial scrolling with GSAP drives page fades, word-level stagger reveals and a horizontally pinned four-step ritual showcase.
- · prefers-reduced-motion is respected throughout so the sequence degrades cleanly.
Admin CMS on Supabase
- · Auth, Postgres, Storage and RLS back hero banner slides, product cards with detail, pricing and ingredients, per-page imagery and consultation inquiries.
- · Everything is editable without a code change or a deploy.
Korean SEO & Prerendering
- · Per-page dynamic meta, OG for KakaoTalk and Naver share previews, JSON-LD, robots and sitemap.
- · A post-build prerender bakes SPA content into static HTML so Naver's crawler can index the body copy at all.
Design Points
Modern Apothecary Identity
Warm cream (#F5F0E8), deep navy (#0E1626), botanical green and soft gold, set in Noto Sans KR against a serif display. The combination holds derma-science credibility and the restraint of plant-based clean beauty in the same frame.
Real-Photo Editorial
Studio photography — the chrysanthemum, volcanic rock, the ampoule, a lab group shot — placed at original aspect ratio with generous whitespace, letting typographic hierarchy carry the brand rather than crops and overlays.
Signature Skin Core Narrative
The hero line, "From Extreme Nature, Built for Skin Core Resilience," turns a supply-chain fact into the brand's central image: resilience that came from somewhere harsh.