Levitating Plan Cards 2.0
Three glass pricing slabs that leave a lit floor, with an edge of light that turns to face the pointer, a glare, floating content, and a shadow, reflection, light shaft and price roll that all follow their height. A Monthly / Yearly switch rolls the numbers.
Canvas 2D0 deps1 file · 35 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef, useState } from "react";
import type { CSSProperties, RefObject } from "react";
/**
* LevitatingPlanCards2 — three glass plan slabs that leave a lit floor, with
* light, shadow, reflection and price all answering the same height.
*
* Version 2.0 of the Levitating Plan Cards. Every slab is a stack of layers
* in real 3D: a dark glass body with a soft top sheen and film grain, an
* edge of light that wraps the rim and turns to face the pointer, a glare
* that follows the pointer across the face, and the content floating 22px
* above the glass so it shifts against the body as the slab tilts.
*
* Under each slab sit four things driven by one number, its height above
* the floor: a crisp contact shadow that spreads and softens, a wide ambient
* shadow, a faint reflection that slides away, and a shaft of light that
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this section
The first Levitating Plan Cards lifted three flat slabs off a lit floor. Version 2.0 builds the whole room. The slabs are glass now: a dark body with a top sheen and film grain, a one-pixel edge of light that turns to face the pointer, a glare that follows it across the face, and the content floating above the glass so it shifts as the slab tilts. Under each slab a contact shadow, an ambient shadow, a reflection and a shaft of light all follow its height, and the featured slab sits over a ring of light with a bead orbiting it while dust drifts up through the beams. A Monthly / Yearly switch rolls every price to its new number on a spring, and the ticks in each list draw themselves as the slab rises. On a phone the slabs stack with the featured plan first.
Curator’s note
Version 2.0 of the Levitating Plan Cards. Pro because it is a small physics rig, not a card style: each slab is a stack of 3D glass layers driven by one spring height, and the contact shadow, ambient shadow, reflection, light shaft, floor ring, dust and the price all derive from that height every frame, written through refs with no per-frame React state. It carries its own helpers and has no dependencies.
