Signal Tiles

Cards 1

About

A grid of service tiles that light up on hover with a twinkling dot field and a glowing arc that slides around the border toward the pointer.

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

Code

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

Usage.tsx

"use client";
import { SignalTiles, type SignalTile } from "@/components/ui/signal-tiles";

const TILES: SignalTile[] = [
  { title: "Sites built to last", href: "#", icon: "globe" },
  { title: "Careful redesigns", href: "#", icon: "redesign" },
  { title: "Online shops", href: "#", icon: "cart" },
  { title: "Sites you can edit", href: "#", icon: "stack" },
  { title: "Launch pages", href: "#", icon: "send" },
  { title: "Brand systems", href: "#", icon: "puzzle" },
  { title: "Motion and interaction", href: "#", icon: "bolt" },
  { title: "UX strategy", href: "#", icon: "pointer" },
  { title: "Speed tuning", href: "#", icon: "rocket" },
  { title: "Care and support", href: "#", icon: "tools" },
];

export default function SignalTilesDemo({
  variant = "dark",
}: {
  variant?: string;
}) {
  return (
    <div className="min-h-full w-full">
      <SignalTiles
        heading="What the Masar studio makes."
        tiles={TILES}
        primary={{ label: "All services", href: "#" }}
        secondary={{ label: "Start a project", href: "#" }}
        theme={variant === "light" ? "light" : "dark"}
      />
    </div>
  );
}