built a visually rich hero-section carousel prototype combining embla carousel for the slide engine, webgl shader gradients for a glowing 3d aura behind the active frame, and a retro crt scanline overlay — all layered together for a cinematic effect.
the carousel uses embla carousel with autoplay (2-second interval), infinite looping, and drag/swipe support. the container has css perspective (1200px) applied, and a motion whileTap animation adds a subtle 3d tilt when users click or drag — making the interaction feel physical.
behind the active center slide, a shadergradientcanvas renders a three.js-based animated 3d gradient sphere. the canvas is scaled to 200%, blurred with a 100px filter, and composited with mix-blend-mode: overlay at 70% opacity. this creates the soft, glowing colored aura that follows the active frame. the gradient is configurable at runtime through a settings modal that accepts custom shadergradient.co urls.
the crt effect is two-layered: a full-page scanline texture overlay (avif/webp) composited with mix-blend-mode and a flicker animation toggling opacity between 0.1 and 0.3, plus per-frame horizontal scanlines via repeating-linear-gradient with a rapid 0.02s crt-flicker cycle.
progressive fade overlays on both edges (200px wide) use directional gradients from opaque black to transparent, creating a vignette effect where slides emerge from and recede into darkness. these are hidden on mobile, where the layout switches to 90% slide width with explicit prev/next arrow buttons.
built with next.js 15 (app router), react 19, tailwind css v4, and motion for animations. uses light-hooks (my own npm package) for the isMobile responsive hook. deployed on vercel.