Card

A highly custom structure panel comprising headers, descriptors, dynamic actions, content boundaries, and custom footers. Implements physical magnetic pulls, click ripples, and boundary reflections.

Preview

Smart Thermostat

Intelligent climate control with scheduling and presets.

Current Temp 72°F

Target Temp 70°F

Configuration

Card Size

Magnetic Physics Pulls card toward mouse pointer

Haptic Press Scaling Press down to squeeze card dimensions

Interactive Ripples Spawns light waves on mouse clicks

Specular Glare Highlight Aligns shiny reflection bounds

Installation

npx shadcn-svelte@latest add https://ui.grgurevic.click/r/card.json

Svelte Composition Code

<script lang="ts">
	import * as Card from "$lib/components/ui/card";
	import { Button } from "$lib/components/ui/button";
</script>

<Card.Root magnetic scale ripple class="w-full max-w-sm shadow-xl">
	<Card.Header>
		<Card.Title>Smart Thermostat</Card.Title>
		<Card.Description>Intelligent climate control.</Card.Description>
		<Card.Action>
			<Button variant="ghost" size="icon-xs">...</Button>
		</Card.Action>
	</Card.Header>
	<Card.Content>
		<div class="text-3xl font-bold">72°F</div>
	</Card.Content>
	<Card.Footer class="flex justify-between items-center">
		<span class="text-xs text-muted-foreground">HomeKit Active</span>
		<Button size="sm">Configure</Button>
	</Card.Footer>
</Card.Root>

API & Props Reference

Prop	Type	Default	Description
size	"default" \| "sm"	"default"	Sets spacing/padding. `sm` uses tighter gap configurations.
specular	boolean	true	Shows specular reflective glossy light borders.
magnetic	boolean	false	Enables drag attraction forces pulling container center towards cursor.
scale	boolean	false	Enables elastic shrink/stretch on hover and presses.
ripple	boolean	false	Enables high-fidelity ambient light ripples on surface clicks.