Gallery

Halide — Chromatic Aberration Lens Archive

by Vanguardia · motionprompts.dev

Halide, an editorial photo studio, presents its image archive as a full-screen grid that pans with the cursor while a WebGL/GLSL lens magnifies the plates beneath the pointer and splits their RGB channels into a chromatic-aberration fringe. Fixed HUD chips (wordmark, volume, caption, hint) frame the effect; the grid is rasterized to a canvas texture and sampled by the fragment shader every frame, eased via requestAnimationFrame (no GSAP).

Type: Web motion
Framework: Vanilla JS
Trigger: pointer
Duration: 2.2–2.2s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: webgl-raf
Complexity: 2/5
Pinned: no
Reduced motion: not handled

rAF lerp pan with WebGL chromatic lens: two independent frame-rate-dependent exponential lerps — 0.035 on the 200vw x 200vh grid's translate (very heavy, long settle) and 0.1 on the lens centre — with no easing curve, no time delta and no scroll involvement

The build prompt

From motionprompts.dev

Vanguardia · motionprompts.dev23,783 chars

# Chromatic Aberration Lens Gallery

## Goal
Build a full-screen, edge-to-edge grid of editorial portraits that **pans slowly as the cursor moves**, overlaid by…

The build prompt

More like this

A pixel wizard casting spells

Rainbow Road Pixel Animation

One-File Generative Visual Demo

Vibe-Coded Pixel Wizard Game

Pixel-art rabbit archer sprite animation loop

Realistic 3D Taj Mahal Model

Fresh recipes, every week.