Glass Orbs

Shaders 1

About

A full-bleed WebGL background of a honeycomb of glass marble orbs that refract slow drifting light beams, with a pointer-tracking lamp effect and automatic reduced-motion/CSS fallback.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Glass Orbs to your project and fits it to your theme.

Code

How Glass Orbs is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { GlassOrbs, type GlassOrbsPalette } from "@/components/ui/glass-orbs";

const amber: GlassOrbsPalette = {
  glow: "#ffb547",
  deep: "#6b3410",
  ground: "#0b0603",
};

export default function GlassOrbsAmberDemo() {
  return (
    <div className="h-screen w-full">
      <GlassOrbs palette={amber} className="h-full w-full">
        <div className="pointer-events-none flex h-full flex-col items-start justify-end bg-[linear-gradient(to_top,rgb(0_0_0/0.7),transparent_50%)] p-6 sm:p-10">
          <p className="font-mono text-[11px] uppercase tracking-[0.18em] text-white/55">
            Vitrine · Marbles
          </p>
          <h2 className="mt-2 max-w-[16ch] text-[clamp(2rem,5vw,3.4rem)] font-semibold leading-[1.02] tracking-[-0.035em] text-white">
            Every bead a little lens.
          </h2>
        </div>
      </GlassOrbs>
    </div>
  );
}