Glass Blinds

Heroes 2

About

A WebGL shader background of horizontal glass slats lit from behind, with a pointer-controlled lamp sliding light across the slats.

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

Code

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

Usage.tsx

"use client";

import {
  GlassBlinds,
  type GlassBlindsPalette,
} from "@/components/ui/glass-blinds";

const palette: GlassBlindsPalette = {
  glow: "#8f9bff",
  deep: "#3a3fd6",
  ground: "#020208",
};

export default function Demo() {
  return (
    <div className="h-screen w-full">
      <GlassBlinds palette={palette} 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 · Night shift
          </p>
          <h2 className="mt-2 max-w-[16ch] text-[clamp(2rem,5vw,3.4rem)] font-semibold leading-[1.02] tracking-[-0.035em] text-white">
            Light, read through the slats.
          </h2>
        </div>
      </GlassBlinds>
    </div>
  );
}