Aura card

A feature card on a live shader gradient that leans toward the pointer and ripples when pressed. Tune grain, noise, speed and ripple while a ⌘K command palette types, picks and runs commands.

Cards, in view and timeline, plus hover and press, Motion

Install

npm i clsx motion tailwind-merge && curl -o components/aura-card.tsx https://motion-brew.com/r/aura-card.tsx

One self contained file for React and Tailwind CSS: aura-card.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { AuraCard } from "@/components/aura-card";

export default function Features() {
  return (
    <AuraCard
      title="Everything, one keystroke away"
      scenes={[
        {
          query: "billing",
          results: [
            { label: "Open billing settings", icon: "card", hint: "G B" },
            { label: "Billing history", icon: "history" },
            { label: "Download invoices", icon: "download" },
          ],
        },
      ]}
      grain={1}
      noise={0.5}
      speed={0.6}
      ripple={0.5}
    />
  );
}

Props

Prop	Type	Default	Description
title	ReactNode	"Everything, one keystroke away"	Card title
description	ReactNode	a line of copy	Under the title
scenes	{ query; results; pick? }[]	billing, deploy, invite	Each result is { label; icon; hint? }; icon is card, history, download, deploy, undo, file, invite, team or mail; pick is the row the loop runs
keys	[string, string]	["⌘", "K"]	The two keycaps and the shortcut in the search row
colors	[string, string, string, string]	blue to periwinkle	The main pool, deepest first
accent	string	"#ff86c8"	The second pool, blending in from the lower right
grain	number	1	Film grain on the gradient, 0 to 3
noise	number	0.5	How much the flow warps, 0 to 1
speed	number	0.6	Flow speed, 0 (still) to 2
ripple	number	0.5	Strength of the rings and press waves, 0 to 1
className	string		Placement and size

More cards

Pricing card: A plan card in a soft shell.
Liquid card: Four status cards with an icon as a glass container: liquid pours in, waves roll and bubbles rise.
Team member card: A team member card with pixels burning up the photo like fire.
Roadmap card: A product roadmap that plays like stories: the bar fills, the number rolls, the text blurs across and the milestones check in.

All animated react card components