Beam

1import { Beam } from "@/components/motion/beam"2import {3  Card,4  CardDescription,5  CardHeader,6  CardTitle,7} from "@/components/ui/card"89export function Example() {10  return (11    <div className="grid w-full max-w-lg grid-cols-1 gap-3 sm:grid-cols-2">12      <Beam13        colors={["#78c8ff", "#be8cff", "#ffb48c"]}14        duration={8}15        size={28}16      >17        <Card className="border-0 bg-transparent shadow-none hover:bg-transparent dark:hover:bg-transparent">18          <CardHeader>19            <CardTitle>Token ready</CardTitle>20            <CardDescription>21              Restyle every surface with your theme.22            </CardDescription>23          </CardHeader>24        </Card>25      </Beam>26      <Beam27        colors={["#78c8ff", "#be8cff", "#ffb48c"]}28        duration={8}29        size={28}30      >31        <Card className="border-0 bg-transparent shadow-none hover:bg-transparent dark:hover:bg-transparent">32          <CardHeader>33            <CardTitle>Copy and ship</CardTitle>34            <CardDescription>35              Drop a piece in and keep moving.36            </CardDescription>37          </CardHeader>38        </Card>39      </Beam>40    </div>41  )42}

1import { Beam } from "@/components/motion/beam"2import { Button } from "@/components/ui/button"34export function Example() {5  return (6    <div className="flex flex-wrap items-center justify-center gap-3">7      <Beam8        colors={["#78c8ff", "#be8cff", "#ffb48c"]}9        duration={8}10        size={28}11        hoverFull12      >13        <Button variant="outline" className="border-0 bg-transparent shadow-none hover:bg-transparent dark:hover:bg-transparent">14          Continue15        </Button>16      </Beam>17      <Beam18        colors={["#78c8ff", "#be8cff", "#ffb48c"]}19        duration={8}20        size={28}21        hoverFull22      >23        <Button variant="outline" className="border-0 bg-transparent shadow-none hover:bg-transparent dark:hover:bg-transparent">24          Get started25        </Button>26      </Beam>27    </div>28  )29}

1import { Beam } from "@/components/motion/beam"2import { Badge } from "@/components/ui/badge"34export function Example() {5  return (6    <div className="flex flex-wrap items-center justify-center gap-3">7      <Beam8        colors={["#78c8ff", "#be8cff", "#ffb48c"]}9        duration={8}10        size={28}11      >12        <Badge variant="outline" className="h-6 px-2.5 border-0 bg-transparent shadow-none hover:bg-transparent dark:hover:bg-transparent">13          New14        </Badge>15      </Beam>16      <Beam17        colors={["#78c8ff", "#be8cff", "#ffb48c"]}18        duration={8}19        size={28}20      >21        <Badge variant="outline" className="h-6 px-2.5 border-0 bg-transparent shadow-none hover:bg-transparent dark:hover:bg-transparent">22          Live23        </Badge>24      </Beam>25    </div>26  )27}

1"use client"23import { useRef, type MouseEvent } from "react"4import { cn } from "@/lib/utils"56const TILES = [7  {8    title: "Token ready",9    description: "Restyle every tile with your theme tokens.",10    image: "/assets/brand/demos/attachments/attachment-1.png",11    className: "sm:col-span-2 sm:row-span-2",12  },13  {14    title: "Copy and ship",15    description: "Install a tile and drop it into a page.",16    image: "/assets/brand/demos/attachments/attachment-2.png",17    className: "sm:col-span-2",18  },19  {20    title: "Compose",21    description: "Mix sections freely.",22    image: "/assets/brand/demos/attachments/attachment-3.png",23    className: "",24  },25  {26    title: "Accessible",27    description: "Keyboard first defaults.",28    image: "/assets/brand/demos/attachments/attachment-4.png",29    className: "",30  },31  {32    title: "Rapid development",33    description: "Ship interfaces that feel finished.",34    image: "/assets/brand/demos/attachments/attachment-5.png",35    className: "sm:col-span-2",36  },37  {38    title: "Theme sync",39    description: "Light and dark out of the box.",40    image: "/assets/brand/demos/attachments/attachment-2.png",41    className: "sm:col-span-2",42  },43]4445const GLOW_REACH_PX = 16046const GLOW_RADIUS = "16rem"4748export function Example() {49  const gridRef = useRef<HTMLUListElement>(null)5051  function syncGlow(clientX: number, clientY: number) {52    const grid = gridRef.current53    if (!grid) return54    for (const el of grid.querySelectorAll<HTMLElement>("[data-glow-tile]")) {55      const rect = el.getBoundingClientRect()56      const x = ((clientX - rect.left) / Math.max(rect.width, 1)) * el.offsetWidth57      const y = ((clientY - rect.top) / Math.max(rect.height, 1)) * el.offsetHeight58      el.style.setProperty("--glow-x", `${x}px`)59      el.style.setProperty("--glow-y", `${y}px`)60      const near =61        clientX >= rect.left - GLOW_REACH_PX &&62        clientX <= rect.right + GLOW_REACH_PX &&63        clientY >= rect.top - GLOW_REACH_PX &&64        clientY <= rect.bottom + GLOW_REACH_PX65      el.dataset.glow = near ? "on" : "off"66    }67  }6869  function onLeave() {70    const grid = gridRef.current71    if (!grid) return72    for (const el of grid.querySelectorAll<HTMLElement>("[data-glow-tile]")) {73      el.dataset.glow = "off"74    }75  }7677  return (78    <ul79      ref={gridRef}80      onMouseMove={(event: MouseEvent<HTMLUListElement>) =>81        syncGlow(event.clientX, event.clientY)82      }83      onMouseLeave={onLeave}84      className="grid w-full max-w-2xl grid-cols-1 gap-3 sm:auto-rows-[10rem] sm:grid-cols-4"85    >86      {TILES.map((tile) => (87        <li88          key={tile.title}89          data-glow-tile90          data-glow="off"91          className={cn(92            "group relative min-h-40 overflow-hidden rounded-xl bg-[var(--border)] p-px sm:min-h-0",93            tile.className,94          )}95        >96          <span97            aria-hidden98            className="pointer-events-none absolute inset-0 z-[1] rounded-[inherit] opacity-0 transition-opacity duration-300 group-data-[glow=on]:opacity-100"99            style={{100              background: `radial-gradient(${GLOW_RADIUS} circle at var(--glow-x, 50%) var(--glow-y, 50%), #78c8ff, #be8cff, #ffb48c, transparent 55%)`,101            }}102          />103          <div className="relative z-10 flex size-full flex-col overflow-hidden rounded-[calc(var(--radius-xl)-1px)] bg-background p-2">104            <div className="relative min-h-0 flex-1 overflow-hidden rounded-sm bg-muted">105              <img106                src={tile.image}107                alt=""108                className="absolute inset-0 size-full object-cover"109              />110            </div>111            <div className="px-1 pt-3 pb-1">112              <h3 className="text-sm font-medium tracking-wide text-foreground">113                {tile.title}114              </h3>115              <p className="mt-1 text-xs tracking-wide text-muted-foreground">116                {tile.description}117              </p>118            </div>119          </div>120        </li>121      ))}122    </ul>123  )124}