Glare Tilt Card
A card that tilts toward the pointer with a true angular specular sweep.
- Category
- Components
- Added
- 2026-09-20
- Deps
- none
- Updated
- 2026-09-20
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Props
"use client";
import { useRef, useState, type ReactNode } from "react";
export function GlareTiltCard({
children,
maxTilt = 12,
glare = 45,
sheen = true,
}: {
children: ReactNode;
maxTilt?: number;
/** Peak glare opacity, 0-100. */
glare?: number;
/** The specular sweep itself. Off leaves the tilt and the rim light. */
sheen?: boolean;
}) {
const ref = useRef<HTMLDivElement>(null);
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this component
Tilt cards are everywhere and most of them get the light wrong. The usual build pins a radial white blob under the cursor, which follows your finger around the surface like a torch; a real specular highlight sweeps ACROSS a surface as the surface rotates, and it is a band rather than a spot. Deriving the gradient's angle from the pointer with `atan2` and feeding it into a linear gradient reproduces that, and it is the single change that makes the card read as glass. Two supporting details matter nearly as much: the content is lifted off the card plane with `translateZ` so it parallaxes against the surface instead of rotating as one flat image, and the rim light is inset on the upper-left edge only, because real objects do not glow evenly around their entire border. Everything — rotation, glare angle, highlight position — is written to CSS custom properties from a ref, since routing pointer position through state would re-render the card and all of its children on every pixel of travel. This library's Tilt Card is the free, simpler sibling; reach for this one when the surface is meant to look like a material.
Curator’s note
Built for viberdy 2.1. An angular gradient rather than a radial hotspot — that single choice is the difference between glass and a flashlight.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Glass Refraction Panel
componentsGlass rather than frost: saturated backdrop, bent edges and a tracking specular rim.