Hero made by @ybouane.

@crazygl/hero-artwork-lens

A clear glass DOME — a magnifying loupe / plano-convex lens — glides over a vibrant artwork with your heading composited on top. By default the artwork is an animated domain-warped colour field; supply your own image or video instead (cover-fit, never stretched). Beneath the lens everything is magnified UPRIGHT (not flipped like a glass marble), like a loupe sitting on the page: the centre magnifies cleanly, straight features curve more toward the rim, red/cyan chromatic fringing grows toward the edge, a Fresnel ring traces the rim and a specular hotspot sits upper-left. Because the heading is part of the scene, it reads normally outside the lens and is magnified, gently bent and chromatically split where the lens passes over it.

Demo

Artwork Lens

Install

npm install @crazygl/hero-artwork-lens

Usage

import ArtworkLens from '@crazygl/hero-artwork-lens';

export default function Hero() {
  return (
    <ArtworkLens
      heading="Look closer."
      subheading="A glass lens glides across the artwork, magnifying and bending every colour beneath it."
      magnification={1.6}
      dispersion={0.6}
    />
  );
}

Customise

• Content — heading, subheading (rasterised into the scene so the lens can magnify them).
• Artwork — artworkImage (image OR video, cover-fit); procedural palette colorA/colorB/colorC and artworkSpeed when no media is supplied.
• Lens — lensRadius, magnification (centre zoom), refraction (dome curvature / rim bend), dispersion (chromatic fringing), rimBrightness (Fresnel rim + specular glint).
• Backdrop — transparent to keep only the glass over whatever sits behind the hero.

Best for

• Design studios, galleries, photography and product brands.
• Editorial and luxury landing pages wanting one tactile, premium optical gesture.
• Product launches over a colourful field, photo or looping video.

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.