FlipCard

A 3D flip card with a front and back face. Supports hover, click, and manual trigger modes, plus an optional mouse-follow tilt and brightness effect.

Import

import { FlipCard } from '@atom-forge/ui';

---

Props

Prop	Type	Default	Description
front	Snippet<[() => void]>	—	Front face content. Receives a flip() function. Mutually exclusive with children.
children	Snippet<[() => void]>	—	Alias for front.
back	Snippet<[() => void]>	—	Back face content. Receives a flip() function.
flipped	boolean	false	Bindable flip state.
trigger	'hover' | 'click' | 'manual'	'hover'	What triggers the flip. Use 'manual' to control flipped externally.
follow	Follow	—	Mouse-follow tilt and brightness effect.
class	string	—	Extra Tailwind classes on the wrapper.

Follow type

type Follow = {
  tilt?: number;           // Max tilt in degrees
  brightness?: number | { day?: number; night?: number };
};

---

Usage

Hover flip

<div class="h-48 w-36">
  <FlipCard>
    {#snippet front(flip)}
      <Card class="h-full flex items-center justify-center">Front</Card>
    {/snippet}
    {#snippet back(flip)}
      <Card class="h-full flex items-center justify-center">Back</Card>
    {/snippet}
  </FlipCard>
</div>

Click flip

<FlipCard trigger="click">
  {#snippet front(flip)}...{/snippet}
  {#snippet back(flip)}...{/snippet}
</FlipCard>

Manual control

<script lang="ts">
  let flipped = $state(false);
</script>

<FlipCard trigger="manual" bind:flipped>
  {#snippet front(flip)}
    <button onclick={() => flipped = true}>Show back</button>
  {/snippet}
  {#snippet back(flip)}
    <button onclick={() => flipped = false}>Show front</button>
  {/snippet}
</FlipCard>

Mouse-follow tilt

<FlipCard follow={{ tilt: 10, brightness: { day: 0.15, night: 0.2 } }}>
  ...
</FlipCard>

---

Notes

• The wrapper uses perspective: 1000px for the 3D effect.
• Both faces use backface-hidden so only the active face is visible.
• FlipCard fills its parent (h-full w-full), so always place it inside a sized container.

When to use

Use for a deliberately two-sided presentation with a visual flip transition.

Alternatives

Use Card for a static surface or Accordion for content disclosure without a 3D effect.

Setup and behavior

Render under Root: the component reads theme context even without follow. Supply a sized parent, one of front / children, and optional back. Bind flipped for external control. Hover mode toggles on both enter and leave rather than setting an absolute state. Click mode bubbles clicks from face content; prefer manual mode for faces containing actions. There is no built-in keyboard flip handler, focus management between faces, or reduced-motion switch.