Tilt Card

Interactive 3D mouse-tracking card tilt with smooth gyroscopic physics, spring damping, and reverse mode.

CLI Installation

React

$pnpm dlxexhumaaddtilt-card--flavor=react

// 01Workbench

Interactive Specification & Studio

cards

Preset:

Viewport

Fluid 100%

3D GYROSCOPEMax: 15°

Tactile 3D Tilt Card

Move pointer across surface. Calculated with 120 FPS spring lerp and zero layout thrashing.

Perspective: 1000pxScale: 1.02x

Parameters

7 Props

maxTilt

perspective

scale

speed

reverse

disabled

axis

// 02Usage

Quick Start & Consumer Example

Copy-paste ready implementation for React (.tsx). Automatically updates when you modify parameters in the Workbench above.

App.tsx

React (.tsx)

import React from 'react';
import { TiltCard } from '@/components/ui/TiltCard';

export default function App() {
  return (
    <div className="min-h-screen bg-background text-foreground flex items-center justify-center p-8">
      <TiltCard
        maxTilt={15}
        perspective={1000}
        scale={1.02}
        speed={0.12}
        reverse={false}
        disabled={false}
        axis="all"
        className="max-w-md w-full border border-border bg-card p-8 rounded-2xl shadow-2xl"
      >
        <span className="font-mono text-xs font-bold text-emerald-500 uppercase">
          TACTILE GYROSCOPE
        </span>
        <h3 className="text-2xl font-black tracking-tight mt-2">Tactile 3D Tilt Card</h3>
        <p className="text-sm text-muted-foreground mt-3 leading-relaxed">
          Zero layout thrashing with cached bounding geometry and direct rAF transform updates.
        </p>
      </TiltCard>
    </div>
  );
}

// 03API Contract

Props & Configuration

Exhaustive parameter contract for Tilt Card. Validated in the live Studio workbench above and statically checked across all 13 ecosystem templates.

Prop	Type	Default	Description
maxTilt	number	15	Maximum 3D tilt rotation in degrees at card boundary edges.
perspective	number	1000	3D perspective projection depth in pixels (lower = stronger foreshortening).
scale	number	1.02	Card scale multiplier applied on pointer hover.
speed	number	0.12	Kinetic spring lerp damping factor (higher = snappier, lower = smoother glide).
reverse	boolean	false	Invert tilt direction (tilts towards cursor instead of sinking away).
disabled	boolean	false	Programmatically disable 3D tilt tracking.
axis	select	all	Constrain tilt rotation axis (all = 3D pitch+yaw, x = pitch only, y = yaw only).

maxTilt

number

Maximum 3D tilt rotation in degrees at card boundary edges.

Default:15

perspective

number

3D perspective projection depth in pixels (lower = stronger foreshortening).

Default:1000

scale

number

Card scale multiplier applied on pointer hover.

Default:1.02

speed

number

Kinetic spring lerp damping factor (higher = snappier, lower = smoother glide).

Default:0.12

reverse

boolean

Invert tilt direction (tilts towards cursor instead of sinking away).

Default:false

disabled

boolean

Programmatically disable 3D tilt tracking.

Default:false

axis

select

Constrain tilt rotation axis (all = 3D pitch+yaw, x = pitch only, y = yaw only).

Default:all

// 04Source Code

Component Source

Component source definition for React (.tsx). Toggle between the clean wrapper and the standalone ejected engine micro-kernel.

TiltCard.tsx

import * as React from 'react';
import * as TiltCardPrimitive from '@exhuma/core';
import { clsx } from 'clsx';

export interface TiltCardProps extends React.ComponentPropsWithoutRef<typeof TiltCardPrimitive.TiltCard> {
  className?: string;
}

export const TiltCard = React.forwardRef<HTMLDivElement, TiltCardProps>(
  ({ className, children, ...props }, ref) => (
    <TiltCardPrimitive.TiltCard
      ref={ref}
      className={clsx(
        'relative overflow-hidden rounded-2xl border border-border bg-card p-6 shadow-sm transition-shadow hover:shadow-md will-change-transform',
        className
      )}
      {...props}
    >
      {children}
    </TiltCardPrimitive.TiltCard>
  )
);
TiltCard.displayName = 'TiltCard';

// 05Architecture

Lifecycle Safety & Performance

Engineered for high-frequency user interactions with zero memory leaks.

Teardown

Deterministic Cleanup

All pointer event listeners, scroll handlers, and resize observers are cleanly destroyed on component unmount, preventing lingering background processes.

Compositor

GPU Compositor Acceleration

Transform and opacity modifications run directly on the GPU compositor thread using will-change: transform without triggering browser layout recalculations.

// 06a11y

Accessibility Considerations

Fully compliant with WCAG guidelines and respects user motion preferences.

Motion

prefers-reduced-motion Support

When a user has prefers-reduced-motion: reduce enabled in their operating system, Exhuma components automatically disable 3D gyroscope tilt and spring animations, rendering static accessible content.

import React from 'react'; import { TiltCard } from '@/components/ui/TiltCard'; export default function App() { return ( <div className="min-h-screen bg-background text-foreground flex items-center justify-center p-8"> <TiltCard maxTilt={15} perspective={1000} scale={1.02} speed={0.12} reverse={false} disabled={false} axis="all" className="max-w-md w-full border border-border bg-card p-8 rounded-2xl shadow-2xl" > <span className="font-mono text-xs font-bold text-emerald-500 uppercase"> TACTILE GYROSCOPE </span> <h3 className="text-2xl font-black tracking-tight mt-2">Tactile 3D Tilt Card</h3> <p className="text-sm text-muted-foreground mt-3 leading-relaxed"> Zero layout thrashing with cached bounding geometry and direct rAF transform updates. </p> </TiltCard> </div> ); }

Prop

Type

Default

Description

maxTilt

number

Maximum 3D tilt rotation in degrees at card boundary edges.

perspective

number

1000

3D perspective projection depth in pixels (lower = stronger foreshortening).

scale

number

1.02

Card scale multiplier applied on pointer hover.

speed

number

0.12

Kinetic spring lerp damping factor (higher = snappier, lower = smoother glide).

reverse

boolean

false

Invert tilt direction (tilts towards cursor instead of sinking away).

disabled

boolean

false

Programmatically disable 3D tilt tracking.

axis

select

all

Constrain tilt rotation axis (all = 3D pitch+yaw, x = pitch only, y = yaw only).

import * as React from 'react'; import * as TiltCardPrimitive from '@exhuma/core'; import { clsx } from 'clsx'; export interface TiltCardProps extends React.ComponentPropsWithoutRef<typeof TiltCardPrimitive.TiltCard> { className?: string; } export const TiltCard = React.forwardRef<HTMLDivElement, TiltCardProps>( ({ className, children, ...props }, ref) => ( <TiltCardPrimitive.TiltCard ref={ref} className={clsx( 'relative overflow-hidden rounded-2xl border border-border bg-card p-6 shadow-sm transition-shadow hover:shadow-md will-change-transform', className )} {...props} > {children} </TiltCardPrimitive.TiltCard> ) ); TiltCard.displayName = 'TiltCard';