Design Laboratory

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

Video Cinematic

Cinematic Video Landing

Full-screen interactive video background showcasing immersive, narrative-driven landing page experiences with custom controls.

Framer MotionVideo Overlay

Feb 20

EXP-01

GSAP Scroll

GSAP Scroll Scrubbing

Hardware accelerated video manipulation tying browser scroll events to the timeline of a cinematic MP4.

ScrollTriggerVideo Scrubbing

Feb 20

EXP-02

GSAP Scroll

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.

Custom CursorHypnotic

Feb 20

EXP-06

WebGL & Canvas

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.

Light ThemeGlassmorphism

Feb 21

EXP-09

GSAP Scroll

Kinetic Video Masking

An aggressive brutalist design featuring scroll-linked exponential scaling of typography, operating as a transparent multiplier mask over video.

Kinetic MaskBlend Modes

Feb 21

EXP-10

WebGL & Canvas

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.

Pixel SortingHTML5 Canvas

Feb 21

EXP-11

Physics & UI

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.

Scroll RevealClip-Path

Feb 21

EXP-13

Physics & UI

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.

Backdrop FiltersParallax

Feb 23

EXP-14

Physics & UI

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 EngineMagnetic Hook

Feb 24

EXP-15

Physics & UI

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.

Velocity SkewHorizontal Track

Feb 24

EXP-16

Video Cinematic

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.

Fluid ColorsInteractive Type

Feb 24

EXP-17

WebGL & Canvas

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.

Point CloudGLSL Particles

Feb 24

EXP-19

WebGL & Canvas

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.

Time DisplacementGLSL Shaders

Feb 24

EXP-20

Physics & UI

SVG Topology Morph

A high-performance vector manipulation experiment exploring mathematical path interpolation and organic geometry morphing using Framer Motion.

SVG MorphingPath Animation

Mar 05

EXP-21

Physics & UI

Kinetic Fluid Typography

An aggressive exploration of typographic fluidity where character glyphs operate as physical entities within a proximity-based displacement field.

Kinetic TypePhysics Engine

Mar 05

EXP-22

Physics & UI

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.

3D PerspectiveMagnetic Hook

Mar 05

EXP-23

Typography

Stark Minimalism Typo

A high-end Swiss-style editorial experiment exploring the relationship between negative space, rigid grid systems, and scroll-driven typographic rhythm.

MinimalismSwiss Design

Mar 05

EXP-24

Graphics & Motion

Ethereal Drift

A high-performance, lightweight cosmic experience. Using CSS blurs and sparse particle systems to create a mysterious 'unknown' atmosphere without system overhead.

LightweightEtherealCosmos

Mar 05

EXP-25

Graphics & Motion

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.

Hand-drawnProceduralInfinite

Mar 05

EXP-26

Graphics & Motion

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.

InteractiveCanvasFlow

Mar 05

EXP-27

Graphics & Motion

Chromatic Resonance

Autonomous light tendrils dance through space with HSL color cycling, trail persistence, and orbital mouse attraction. A living canvas of bioluminescent beauty.

GenerativeTendrilsChromatic

Mar 06

EXP-28

Experimentation is the foundation of innovation.
Designed and built for continuous learning.

Interactive DesignArchive & Experiments