---
title: Opening Card Row
description: An acronym preloader, then tall cards that slide across a pinned hero and open.
category: Scroll
tier: pro
url: https://ui.dimaac.com/components/form-cards
registry: https://api.dimaac.com/v1/ui/r/form-cards.json
registry_auth: Authorization: Bearer <DiMaac licence key>
---

# Opening Card Row

An opening for a studio site. A preloader spells a word one letter at a time (F becomes Find, O becomes Order and so on), the two halves part around a small chamfered frame and the frame grows into the full-screen hero. Then the hero pins, a row of tall cards slides across it and every card opens as it arrives: the photo grows taller from a zoom, the title blurs in and the small links follow. A bubble that says Explore follows the cursor over the photos. Cards, copy, word, colours and scroller are props. It locks the page only while the preloader plays, adapts to phones, and with reduced motion skips the preloader and the pin: the hero is plain and the cards are a row you scroll sideways, already open.

## Install

This is a Pro component: its source is for buyers of Pro Components, a Templates plan or All-Access, and is not on this page. It installs from the authenticated registry, with the licence key in an environment variable.

1. Merge the registry into components.json (the key is never written into the file):

```json
{
  "registries": {
    "@dimaac-pro": {
      "url": "https://api.dimaac.com/v1/ui/r/{name}.json",
      "headers": { "Authorization": "Bearer ${DIMAAC_LICENSE_KEY}" }
    }
  }
}
```

2. Put the licence key in `.env.local` (keep it out of git; never print or commit it). Ask the owner for it if it isn't set:

```bash
DIMAAC_LICENSE_KEY=your-licence-key
```

3. Add the component:

```bash
npx shadcn@latest add @dimaac-pro/form-cards
```

The registry item is https://api.dimaac.com/v1/ui/r/form-cards.json and answers only with `Authorization: Bearer <licence key>` (or `X-License-Key`). It answers 401 without a key, 403 for a key that isn't valid, and 402 for a key whose purchase doesn't include Pro components (see https://ui.dimaac.com/pricing).

Dependencies:

```bash
pnpm add gsap @gsap/react
npm install gsap @gsap/react
```

By hand:

Unlock the code on https://ui.dimaac.com/components/form-cards with your licence key, then:

1. Install the packages it uses: gsap, @gsap/react.
2. Copy the component file from the Code panel (once your licence key unlocks it) into components/dimaac/form-cards.tsx.
3. It's styled with Tailwind v4 classes. If that folder sits outside the places Tailwind scans, add it with @source in your CSS.
4. Import it with import { FormCards } from "@/components/dimaac/form-cards" and give its parent a size: it fills it.

## Usage

```tsx
import { FormCards } from "@/components/dimaac/form-cards";

<FormCards cards={cards} heroSrc={heroSrc} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `cards` (required) | `FormCard[]` | - | The cards, in order. Three to six work best. |
| `heroSrc` (required) | `string` | - | The photo behind the hero. It also appears in the preloader's frame. |
| `word` | `string` | `"FORM"` | The big word the preloader spells, one letter per word in `letters`. |
| `letters` | `string[]` | `["Find", "Order", "Refine", "Make"]` | What each letter of `word` stands for. A word starting with its letter ("Find" for F) slides out from it. |
| `preloader` | `boolean` | `true` | Plays the preloader first. Off shows the hero straight away. |
| `scrub` | `number` | `1` | How many seconds the cards take to catch up with the scrollbar as they open. 0 follows it exactly. |
| `cardWidth` | `number` | `560` | The width of each card, in pixels. It shrinks to fit narrow screens. |
| `headline` | `string` | `"We’re a purpose driven architecture and interior design studio"` | The big headline at the bottom of the hero. |
| `eyebrow` | `string` | `"Architecture + Interiors"` | The small line at the top left of the hero. |
| `tagline` | `string` | `"A People-Focused Approach"` | The small line next to it. |
| `hint` | `string` | `"Scroll to explore"` | The label next to the round arrow that scrolls the page. |
| `exploreLabel` | `string` | `"Explore"` | The text of the bubble that follows the cursor over a card's photo. |
| `scroller` | `HTMLElement \| string \| null` | `null` | The scrolling element (an element or a selector). Leave it out to use the page. |
| `className` | `string` | `""` | Extra classes for the outer box. Set the page colour with the --fc-page variable, e.g. "[--fc-page:#fff]". |

## Credits

- Hero photo: Siren Media, Lummi (https://www.lummi.ai/photo/modern-interior-with-red-wall-6k-hl), Lummi License
- Homes: Mariate, Lummi (https://www.lummi.ai/photo/minimalist-architectural-design-b8bbc), Lummi License
- Interiors: SHIHO, Lummi (https://www.lummi.ai/photo/minimalist-rustic-interior-qppyl), Lummi License
- Campuses: Mikiwa, Lummi (https://www.lummi.ai/photo/modern-building-corner-dr5dz), Lummi License
- Public: Jupiter et Passagère®, Lummi (https://www.lummi.ai/photo/modern-minimalist-building-kumrj), Lummi License
- Retreats: Viri Gutiérrez, Lummi (https://www.lummi.ai/photo/contemplative-silhouette-against-modern-minimalist-architecture-1-haa), Lummi License

## Source

The source of a Pro component is for buyers of Pro Components, a Templates plan or All-Access. Install it with the commands above, or unlock it on https://ui.dimaac.com/components/form-cards.

## Agent prompt

```text
Add the Opening Card Row component (<FormCards />) from DiMaac UI to this project. It is a Pro component, so its source needs the owner's DiMaac licence key (Pro Components, a Templates plan or All-Access).

Docs: https://ui.dimaac.com/components/form-cards

1. Add the Pro registry to components.json (merge it into "registries"). Don't write the key into the file:
{
  "registries": {
    "@dimaac-pro": {
      "url": "https://api.dimaac.com/v1/ui/r/{name}.json",
      "headers": { "Authorization": "Bearer ${DIMAAC_LICENSE_KEY}" }
    }
  }
}

2. The owner puts their licence key in .env.local (keep it out of git): DIMAAC_LICENSE_KEY=your-licence-key
   Ask them for it if it isn't set. Never print it or commit it.

3. Install it with:
npx shadcn@latest add @dimaac-pro/form-cards

The registry item is https://api.dimaac.com/v1/ui/r/form-cards.json and wants the header "Authorization: Bearer <licence key>".

Then use it like this:
import { FormCards } from "@/components/dimaac/form-cards";
<FormCards cards={cards} heroSrc={heroSrc} />

It imports gsap, @gsap/react; the CLI installs them. It uses Tailwind v4 classes, so make sure Tailwind scans that folder.
Give its parent a size, keep light and dark mode working and keep its prefers-reduced-motion fallback.
Full index for agents: https://ui.dimaac.com/llms.txt
```