Hover 3D

Hover 3D divides a surface into eight invisible pointer zones. Moving across them changes the direction of the tilt, highlight, and shadow. It is excluded from the default bundles.

Import

@import "tailwindcss";
@import "@duskmoon-dev/core";
@import "@duskmoon-dev/core/effects/hover-3d";

Individual CSS: @duskmoon-dev/core/effects/hover-3d.css (also available via the style export condition on @duskmoon-dev/core/effects/hover-3d). JavaScript import { css, styles } from "@duskmoon-dev/core/effects/hover-3d" exposes CSS text and a nullable CSSStyleSheet (null during SSR). It is not an interaction runtime.

Example

The rendered content must be the first child, followed by exactly eight empty elements that form the hover zones.

<a class="hover-3d" href="#api" aria-label="Open orbital field notes"><article class="card"><div class="card-body"><h2 class="card-title">Orbital field notes</h2><p>Move across the card to steer its perspective.</p><span class="btn btn-primary">Open notes</span></div></article><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></a>

Markup contract

<a class="hover-3d" href="/field-notes">
  <article class="card">...</article>
  <span></span><span></span><span></span><span></span>
  <span></span><span></span><span></span><span></span>
</a>

Do not put links, buttons, or form controls inside the first child: the eight zones intentionally sit above it. When the surface is actionable, make the .hover-3d wrapper itself a link as shown. Coarse pointers receive the normal, untilted content. Reduced-motion mode and print also remove the transform. No JavaScript controller is required.