Shadcn.io is not affiliated with official shadcn/ui
Pendulum Text
Letters dangle from invisible strings and swing as underdamped pendulums driven by Motion springs for React applications.
Pendulum Text preview
Type that hangs from the ceiling. Each character is pinned by an invisible string at its top edge and swings around that anchor as a real pendulum — Motion's useSpring drives an underdamped harmonic oscillation, so a click sends every letter into a back-and-forth arc that gradually settles. At rest the letters hang at slightly different angles, derived deterministically from each glyph's index so the word looks alive even before you touch it. A faint vertical hairline above each glyph hints at the suspending thread without dominating the composition. Spaces stay rigid. Drop it into a hero, a 404, or any moment where you want type that responds to a poke.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this text effect for you — no copy-paste, no CLI:
use shadcnio to install the pendulum-text text effect into my projectRelated Components
Wobble Text
Continuous rotational oscillation with a soft scale pulse
Bouncing Text
Letters bouncing on a vertical spring rhythm
Drift Text
Drifting per-character motion with subtle sway
Wave Text
Letters undulating along a continuous sine wave
Tilt Text
Per-character tilt that follows the cursor
Falling Text
Physics-based letters that drop and pile
FAQ
Was this page helpful?
Sign in to leave feedback.
Password Text
Text rendered as masking dots that morph one-by-one into the real characters with a staggered cross-fade and subtle scale, built with React, Next.js, and motion/react for privacy-aware UI.
Pop Text
Cartoon impact reveal with overshoot scale, sequential stagger, and an optional comic starburst graphic on each letter for React applications.