Skip to content
Fieldbook
Menu
Sign in
EN

Text effects

Physics drop text

Physics drop text: A sentence breaks into words that fall, tumble and bounce under simulated gravity, then settle and can be flicked around with the pointer.

Using Physics drop text

Physics drop text uses the wide preview frame with a light/dark theme setting.

Customize the preview

These controls are passed to the demo. Defaults and limits describe the preview; consult the implementation for its full prop API.

ControlTypeDefaultPreview limits
texttextComponents fall into place with real gravity and physicsUp to 90 characters
gravitynumber0.6From 0 to 2; step 0.1
highlightColorcolor#38BDF8No additional limit in the metadata.
triggerselectautoOptions: auto, scroll, click, hover
Which frameworks are available for Physics drop text?

Physics drop text is available for React, Vue, Svelte, Astro, HTML. The live preview uses React; the source observations below apply to index.tsx. Check the selected port before relying on the same interactions.

What does Physics drop text depend on?

The React metadata lists these npm dependencies beyond React: motion.

What accessibility details are visible in Physics drop text?

The React source for Physics drop text includes: attributes and handlers (aria-hidden). These are source observations. Verify accessible names, focus order and keyboard behavior in the composed page.

How does Physics drop text handle reduced motion?

Physics drop text reads the motion preference in its React source through useReducedMotion(). Check the full implementation, shared styles and selected port with reduced motion enabled; these observations do not establish that every animation stops.

Connect your agent

Related open components

Still of the Cascading Letter Reveal component, a Fieldbook UI component in Text effects.
2824Cascading Letter RevealText effectsA headline that reveals itself letter by letter with a soft rise and fade as it enters view, then holds steady once finished.
Still of the Circular hover speed ring component, a Fieldbook UI component in Text effects.
2320Circular hover speed ringText effectsA phrase spins slowly around a circle until the pointer arrives, then snaps to a fast spin and grows slightly before easing back once the pointer leaves.
Still of the Count Up Number component, a Fieldbook UI component in Text effects.
2327Count Up NumberText effectsA large numeral that springs from a starting value up to a target once it scrolls into view, overshooting slightly before it settles.
Still of the Hand-drawn text marker component, a Fieldbook UI component in Text effects.
2164Hand-drawn text markerText effectsWraps a span of text with a hand-drawn marker annotation, such as a highlight wash, underline, circle, or box, that draws itself on with a slightly imperfect sketched stroke.
Still of the RGB glitch heading component, a Fieldbook UI component in Text effects.
2810RGB glitch headingText effectsA heading that splits into red and cyan offset copies clipped to jumping horizontal bands, flickering like a broadcast signal losing sync.
Still of the Scroll float reveal component, a Fieldbook UI component in Text effects.
2820Scroll float revealText effectsHeading characters float up from below and settle into shape as their section scrolls through the viewport, scrubbed directly to scroll position.