Glow Rules

Component

About

A hover effect that lights up the hairline borders between list, table, or grid items as the cursor (or keyboard focus) moves over them.

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

Code

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

Usage.tsx

import { GlowRules } from "@/components/ui/glow-rules";

const posts = [
  {
    slug: "trading-soft-line",
    title: "Trading a soft line off a sharp book",
    href: "#",
  },
  {
    slug: "event-contracts",
    title: "Sizing risk on event contracts",
    href: "#",
  },
  {
    slug: "ocr-vision-pipeline",
    title: "Building a high-confidence OCR + vision verification pipeline",
    href: "#",
  },
  {
    slug: "expo-updates-cloudflare",
    title: "Self-hosting Expo updates on Cloudflare",
    href: "#",
  },
  {
    slug: "mobile-automation-physical-layer",
    title: "The physical layer of mobile automation",
    href: "#",
  },
];

export default function Writing() {
  return (
    <div className="flex w-full items-center justify-center bg-background p-10">
      <GlowRules selector="li" className="w-full max-w-xl">
        <ul>
          {posts.map((p) => (
            <li key={p.slug} className="py-4">
              <a
                href={p.href}
                className="text-sm text-foreground hover:text-foreground/80"
              >
                {p.title}
              </a>
            </li>
          ))}
        </ul>
      </GlowRules>
    </div>
  );
}