Building an Interactive Fashion Hero with HTML, CSS & GSAP

Habib — Tue, 22 Sep 2026 02:12:36 +0000

I wanted to experiment with something different from the usual landing pages.

So I built:

NOIR//FORM — AFTER DARK
An Interactive Fashion Hero Concept.

The idea was to treat a fashion campaign like an interactive digital magazine rather than a conventional ecommerce hero.

Built from scratch with:

• HTML
• CSS
• Vanilla JavaScript
• GSAP

The hero combines cinematic fashion photography, brutalist architecture, oversized editorial typography, layered composition and motion.

Some of the interactions I explored:

→ GSAP entrance choreography
→ Character-by-character editorial reveals
→ Mouse-follow parallax
→ Layered depth between background, typography and model
→ Hover micro-interactions
→ Responsive mobile art direction
→ Cinematic atmospheric effects
→ Continuous editorial marquee

One of the interesting parts was designing the mobile version.

Instead of simply shrinking the desktop composition, I treated mobile as a separate art direction while keeping the same visual language.

The goal was to make the interface feel like part of the fashion campaign itself.

No React.
No Next.js.
No UI framework.

Just HTML, CSS, JavaScript and GSAP.

This is currently a focused hero-section experiment rather than a complete ecommerce website.

I'd love to hear what other frontend developers and designers think about the interaction and visual direction.

Live

"ImageStudioLab: AI-Powered Photo Generation in Seconds with Gemini 2.5 Flash"

Habib — Thu, 11 Sep 2025 18:36:26 +0000

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

ImageStudioLab is an AI-powered photo generation platform that creates stunning, professional-quality images in seconds. It solves the problem of expensive and time-consuming photoshoots by allowing users to generate Instagram-ready photos, gaming character transformations, cinematic scenes, and lifestyle content using just their selfies and AI prompts. The platform offers 5 different generation modes including AI Photoshoot, CineShot AI, Gaming Photoshoot, DreamRide AI, and Live Avatar Studio.

Demo

https://imagestudiolab.com/

How I Used Google AI Studio

I leveraged Google AI Studio's Gemini 2.5 Flash model for multimodal image generation. The platform processes user-uploaded selfies combined with text prompts to generate personalized content. I implemented:

Image-to-image generation for photorealistic transformations
Multimodal understanding to interpret both visual and textual inputs
Batch processing for generating multiple variations (3 per generation)
Real-time generation with instant results

Multimodal Features