About This Project

Cosmictics is an immersive cosmetics e-commerce experience that pushes the boundaries of web performance with GPU-accelerated rendering throughout. The storefront features a WebGPU-powered global background with mouse-tracking orbital rings and cursor trails, a hero section with 6 animated gradient curves rendered via TypeGPU shaders, and a fully interactive Cosmic Swatch Laboratory where users draw GPU-rendered gradient strokes with glow effects across 5 cosmetic formulations. Product cards feature Redraw-powered neon border animations on hover. State management uses Redux Toolkit with Redux Persist for cart and wishlist data surviving browser refreshes, while a custom high-fidelity Redraw mock provides the fitPath, GradientAlongPath, SingleStrokeBrush, and Feather APIs aliased via webpack.

Key Features

Built a multi-layered WebGPU rendering pipeline using TypeGPU and a custom Redraw mock to power an always-on cosmic aura background with mouse-tracking orbital ellipses, hero gradient curve animations, and GPU-rendered neon card borders

Developed an interactive Cosmic Swatch Laboratory with 5 cosmetic formulations, 30-stroke GPU drawing canvas, gradient-along-path rendering with glow feathering, replay animation, and palette export — with graceful SVG/CSS fallback for unsupported browsers

Implemented persistent cart and wishlist system using Redux Toolkit with Redux Persist, featuring quantity management, favorites toggle, and localStorage-backed state hydration across browser sessions

▲ Next.js

June 2026

Cosmictics

🌐 Live Demo 💻 Source Code

A GPU-accelerated cosmetics e-commerce storefront built with Next.js 16 App Router, React 19, Tailwind CSS 4, and TypeScript — featuring real-time WebGPU-powered visuals via TypeGPU & Redraw, persistent cart/favorites with Redux Toolkit, and an interactive swatch laboratory.