Tilt

A card that leans toward the pointer on a loose spring, overshooting slightly and settling, with a highlight that travels round its 1px edge like light on a bevel.

$149 once · every Pro piece

Customize

Max lean (deg)

Radius (px)

The bright segment sits on the edge facing a light above-left and slides round the perimeter as the card tilts; pressed, the card sinks and its core runs accent. Children marked with a depth shift with the tilt for parallax.

Install

npx shadcn@latest add @obsyde/tilt

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { Tilt } from '@/components/obsyde/ember/tilt/Tilt';

export function Example() {
  return (
    <Tilt />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

ember/tilt/Tilt.tsxcomponent
ember/tilt/tilt-demo.cssstyles
ember/tilt/tilt.cssstyles
ember/tilt/TiltDemo.tsxdemo
ember/shared/accent.tsshared
ember/shared/spring.tsshared
ember/shared/ember.cssshared

API

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`max`Max lean (deg)	`number`	`8`
`radius`Radius (px)	`number`	`14`