Levitating Field Input 2.0
A real text input whose letters each float on their own over a glass plate. A lamp follows your pointer and swings every shadow, a wave runs through the letters around the caret, and submitting lands them one by one with a ring of light.
DOM + CSS0 deps1 file · 19 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
import type { ChangeEvent, ComponentPropsWithoutRef, CSSProperties, FocusEvent, KeyboardEvent, SyntheticEvent, UIEvent } from "react";
/**
* LevitatingFieldInput 2.0 — every typed letter floats on its own, lit by a lamp that follows the pointer.
*
* It is still one real <input>: caret, selection, autofill, IME, maxLength and
* every attribute stay native. The input's own ink is transparent; a mirror
* layer draws each character as its own element, hung above a glass plate and
* casting a three-part shadow (umbra, penumbra, contact) away from the lamp.
* Typing sends a small wave through the letters around the caret, a new letter
* rises into place, a selection lifts as a block, and submitting (set
* `dropped`) lands the letters one after another with a bounce and a ring of
* light on the shelf. The lamp is the pointer: shadows swing, the glint and
* the plate's rim light slide, and the beam above the field leans with it.
* Focus lifts the words, opens the beam and pools light on the shelf under the
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this component
A text field where every letter floats. Type and each new letter rises into place, a small wave runs through its neighbours around the caret, and a selection lifts as a block. Move the pointer anywhere on the page and the lamp follows: three-part shadows swing away from it, the plate's rim light and glint slide, and a beam above the field leans. Focus lifts the words, opens the beam and pools light on the shelf under the caret. When the form is sent, set dropped and the letters land one after another with a bounce and a ring of light. It has a light and an OLED dark tone, an altitude readout, a character counter, and a label, hint and error, so it drops into any form.
Curator’s note
The first version lifted the whole line with one text-shadow. This one gives every letter its own height: the real input keeps its caret, selection, autofill and IME but paints nothing, and a mirror layer draws each character as a separate element in exactly the same place. Registered custom properties carry the height, the lamp and the caret position, so the browser interpolates all of it and there is no animation loop. The lamp is the pointer, so shadows, the rim light and the glint move with your hand.
