Interactive Design
Archive & Experiments
A curated sanctuary of UI/UX explorations, micro-interactions, and visual experiments. Organized by core technology and interaction models.
Interactive Design Archive
Cinematic Video Landing
Full-screen interactive video background showcasing immersive, narrative-driven landing page experiences with custom controls.
GSAP Scroll Scrubbing
Hardware accelerated video manipulation tying browser scroll events to the timeline of a cinematic MP4.
Advanced GSAP Landing
Highly professional immersive landing sequence utilizing dynamic clip-path masking and staggered typographic reveals.
Vector Pipeline
Solving the blurred pixel issue by animating mathematically pure, infinitely scalable SVG graphics with DrawSVG techniques.
Unicorn Studio WebGL
Integrating powerful, real-time WebGL canvases within a Next.js environment for unprecedented 3D interactivity.
Mesmerizing WebGL
A hallucinatory descent blending a deeply colorful canvas particle system with custom physics-based cursor masking.
Professional WebGL Landing
A highly refined, minimalist layout framing an immersive WebGL background, tailored for enterprise and premium SaaS aesthetics.
Ultimate UI/UX Masterpiece
The pinnacle of the archive. A high-end editorial and modern luxury aesthetic utilizing advanced Framer Motion interactions over a volumetric WebGL deep canvas.
Light Theme Video Elements
A stark shift focusing on airy, pure white typography and soft frosted glass elements over an ethereal video background to evoke calmness.
Kinetic Video Masking
An aggressive brutalist design featuring scroll-linked exponential scaling of typography, operating as a transparent multiplier mask over video.
Canvas Video Distortion
An avant-garde exploration dropping down to HTML5 canvas core logic. Reads live MP4 memory to mathematically split RGB channels based on mouse velocity.
Floating Video Glass
An ultra-premium tactile experience utilizing Framer Motion's physical springs. The video acts as both an ambient aura and crisp 3D PIP content.
Cinematic Viewfinder
An immersive scroll-driven experience that expands a tiny CSS clip-path circle into a massive edge-to-edge widescreen video reveal.
Fractured Prism Parallax
A mesmerizing CSS experiment utilizing extreme backdrop-filters (blur, invert, hue-rotate) on polygon clip-paths. Dozens of glass shards parallax over a continuous background stream.
Magnetic Smooth Fluidity
Overrides native scrolling using Lenis for buttery momentum physics. Features GSAP magnetic hover buttons and deep editorial spacing over responsive video parallax.
Lenis Velocity & Horizontal Track
A G-Force physics simulation that skews and stretches elements based on real-time scroll velocity, transitioning into a massive, buttery smooth horizontal scroll hijack sequence.
Chroma Velocity
Utilizing CSS mix-blend-modes and Framer Motion to paint generative, massive fluid light spheres over monochrome video plates. Features 3D pointer-reactive parallax typography.
Fragment GLSL 018
A profound WebGL interactive experience built with React Three Fiber. Utilizes custom vertex and fragment shaders to directly manipulate and distort video pixels based on pointer coordinates.
Particle Continuum
A profound WebGL Interactive Point Cloud. 90,000 individual particles mathematically generate a procedural evolving color spectrum. Hover to initiate a dynamic, physics-based magnetic repulsion system.
Temporal Mosaic
An advanced WebGL temporal displacement experiment. Using 3 independent video buffers with unique time offsets, the shader isolates RGB channels across a perfectly ratio-preserved 3-column mosaic grid.
SVG Topology Morph
A high-performance vector manipulation experiment exploring mathematical path interpolation and organic geometry morphing using Framer Motion.
Kinetic Fluid Typography
An aggressive exploration of typographic fluidity where character glyphs operate as physical entities within a proximity-based displacement field.
Magnetic 3D Perspective
An immersive 3D typography grid that pivots and tilts in real-time, responding to cursor coordinates to create a high-end volumetric perspective effect.
Stark Minimalism Typo
A high-end Swiss-style editorial experiment exploring the relationship between negative space, rigid grid systems, and scroll-driven typographic rhythm.
Ethereal Drift
A high-performance, lightweight cosmic experience. Using CSS blurs and sparse particle systems to create a mysterious 'unknown' atmosphere without system overhead.
Infinite Path
An infinite hand-drawn line animation that flows vertically with organic swaying and pen-like jitter. Exploring the concept of persistent human effort and mechanical repetition.
Guided Path
A reactive version of the infinite path where the line's trajectory is guided by mouse movement. A collaborative drawing experience between human and code.
Chromatic Resonance
Autonomous light tendrils dance through space with HSL color cycling, trail persistence, and orbital mouse attraction. A living canvas of bioluminescent beauty.
Ink & Timber
A whimsical interactive sketchbook world. Blends physical photography with digital sprites and animated portals on a wooden timber surface.
Aether Bloom
Generative bioluminescent flora blooming in an etheric fluid space. A tribute to the vernal pulse of spring.
Zen Pulsar
A minimalist interactive study on persistent growth. High-contrast monochromatic expansion driven by spring-based physics.
Parallel Vision
An interactive 'dimension rift' experiment. Move the mouse to reveal a parallel world through a cinematic radial mask.
Ant Colony
A profound simulation of collective intelligence. 2,000 algorithmic agents emerge into complex pheromone networks, guided by your presence.
Experimentation is the foundation of innovation.
Designed and built for continuous learning.