Tween UITween UI
7

Blocks

Card Spotlight Grid

A staggered project grid where the hovered tile tilts toward the cursor while the rest fall back.

A ready-made work section. Tile heights cycle every six cards, so each row reads as a staggered skyline. On hover the tile tilts toward the cursor in 3D while its siblings scale back and dim — the spotlight lands on one project at a time. Tilt and dimming are pointer-only.

New tab

Where ideas become experiences

Every project here is built with one goal — performance. From concept to launch, we focus on solutions that drive engagement, conversions, and growth.

Abstract 3D brand shapesNorthwindBrand & site
Product interface on a laptopLumenProduct UI
Team reviewing a launch pageFieldnoteLaunch page
Design team at a whiteboardCadenceDesign system
Analytics dashboardHaloCampaign film
Workshop session in progressAtlasData platform

Installation

pnpm dlx shadcn@latest add @tween-ui/card-spotlight-grid

Usage

app/page.tsx
app/page.tsx
import CardSpotlightGrid from '@/components/tweenui/card-spotlight-grid';
 
export default function Page() {
  return <CardSpotlightGrid />;
}

Pass your own projects:

app/page.tsx
app/page.tsx
import CardSpotlightGrid from '@/components/tweenui/card-spotlight-grid';
 
export default function Page() {
  return (
    <CardSpotlightGrid
      title="Selected work"
      description="Six builds from the last year."
      projects={[
        {
          title: 'Northwind',
          excerpt: 'Brand & site',
          image: '/work/northwind.jpg',
          imageAlt: 'Northwind brand system',
          href: '/work/northwind',
        },
        {
          title: 'Lumen',
          excerpt: 'Product UI',
          image: '/work/lumen.jpg',
          imageAlt: 'Lumen product interface',
          href: '/work/lumen',
        },
      ]}
    />
  );
}

Props

PropTypeDefaultDescription
titleReactNodesample headingSection heading.
descriptionstringsample lineSupporting line under the heading.
projects{ title, excerpt, image, imageAlt, href? }[]six sample tilesTiles in the grid.

Extends native <section> attributes (className, style, …).

Tile heights repeat on a six-card cycle. With a count that is not a multiple of six the pattern simply continues from the start — no layout gaps.

Accessibility

Each tile is a single link carrying the project title, and every image keeps its alt text. The tilt and dimming run only for (hover: hover) and (pointer: fine) pointers, so touch users get a plain grid. Under prefers-reduced-motion: reduce nothing animates — no intro, no tilt, no dimming — and tiles render at their final state.