Project Overview: The "UI Developer" Sprint
This project was a personal challenge and a showcase of my "UI Developer" philosophy: the ability to bridge the gap between high-end design and high-performance code, all from a single person.
The client, Léviqueé, needed a full brand identity and a "slick, modern" landing page to launch their new fashion line. I took this project from a blank canvas in Figma to a fully-animated, interactive live prototype.
My role was to be the all-in-one designer and developer. This unique position allowed me to make design decisions knowing how they would be built, and to build knowing the design intent. The entire process—from first sketch in Figma to final live prototype—was completed in under two weeks.
Phase 1: The Design (Figma)
Before any code was written, the brand had to exist. I worked directly with the client to define their identity.
- Brand Identity: We established a "modern, minimalist, and flowing" aesthetic. Their tagline, "Shape Your Essence, Miniaturize Style," became the core theme.
- Figma Prototype: I designed the entire landing page in Figma, focusing on a strong grid, editorial typography, and key interactive moments.
- The "Flow" Concept: The design tells a story as the user scrolls. I knew animation would be key, so the Figma prototype was designed section-by-section to feel like a "reveal," leading the user down the page. Constant client feedback and a live prototype link from Figma ensured they were part of the process from day one.
Phase 2: The Build (Vue 3 & GSAP)
This is where being a "UI Developer" shines. I was able to translate my own Figma designs into pixel-perfect code in less than a week.
The key was to bring the "flow" concept to life.
- Smooth Scroll: The entire page uses GSAP ScrollTrigger to animate elements in and out, creating a seamless storytelling experience.
- Micro-interactions: Small, subtle animations on product cards and text give the page a tactile, premium feel.
The Key Feature: GSAP Logo Video Mask
The "wow" moment of the site is the hero section. I wanted to create a scroll-based animation that literally revealed the brand's product through its logo.
- The Idea: As the user scrolls, a product video plays, but it's "masked" by the Léviqueé logo. The video seems to be inside the text.
- The Tech: This was achieved using a
mix-blend-modein CSS and a complex GSAP timeline.- A high-quality video (more on this below) sits on a bottom layer.
- The "Léviqueé" logo, as a white SVG or text, sits in a
stickylayer on top. - By applying
mix-blend-mode: screen;(ormultiply, depending on the layers), the video only shows through the white parts of the logo. - GSAP ScrollTrigger scrubs the video's
currentTimebased on the user's scroll position, making them feel like they are "controlling" the reveal.
It's a high-impact, memorable introduction to the brand that's achieved with pure frontend magic.
A Note on Tooling: AI-Generated Video
The product video itself was a challenge. We had the fashion, but no budget for a full-scale video shoot.
To solve this, I turned to Google's VEO, an AI video generation model. By feeding it high-resolution product images and text prompts ("a woman walking through a parisian street in a flowing dress, cinematic, soft light"), I was able to generate a series of stunning, abstract, and "on-brand" video clips for the hero mask and other sections. This was a perfect "UI Developer" solution: using a cutting-edge tool to solve a practical problem.
The Outcome: Speed and Quality, Combined
- For the Client: They received a fully-realized brand identity, a live interactive prototype, and a "wow" feature in under two weeks—a timeline that would be impossible if a separate designer and developer had to coordinate.
- For Me: This project is a perfect case study in my "UI Developer" workflow. It proves that by owning both the design (Figma) and the development (Vue/GSAP), I can rapidly produce high-quality, creative, and technically impressive work. The barrier between "what I can design" and "what I can build" disappears.