shadcn.io is not affiliated with official shadcn/ui
Magnify Text holds a magnifying glass over the text. Where the pointer goes, a round lens grows in and enlarges the letters under it; it glides after the pointer, the letters sliding through it, and shrinks away where the pointer leaves, so the text reads normally at rest.
Use it for a word worth inspecting, fine print you want noticed, or a playful detail on a landing page. To make letters swell in place instead, use Variable Proximity; to light them, Spotlight Text. The lens is a round window at the pointer holding a copy of the text, scaled about the point under the pointer so its letters line up with the ones beneath, over a matching hole in the text; its place is two registered CSS properties that each move of the pointer writes and a transition eases, with no animation library.
Installation
Usage
import { MagnifyText } from "@/components/ui/magnify-text";<h2>
<MagnifyText text="Look closer" />
</h2>Demos
Scale
scale is how much the lens magnifies: about 1.3 reads as a reading glass, 2 or more as a jeweller's loupe; 1.6 by default.
Fine print
On small text, a strong lens with a radius in pixels makes a line readable at a glance. By default the lens's radius is one and a quarter times the text's size, which suits a headline but would be tiny over fine print.
Accessibility
Screen readers read the text once, from a visually hidden copy; the lens and its copy are hidden from them. The lens only enlarges what's already there, so keyboard users miss nothing, and at rest the text is whole. On a touch screen, a touch shows the lens under the finger, and it shrinks away when the finger lifts. With reduced motion the lens appears at once and follows the pointer without gliding.
FAQ
Why do the letters in the lens line up with the ones beneath?
The copy in the lens is scaled about the point under the pointer, not about its middle: the letter under the pointer stays where it is and the ones around it spread out from it, as through a real lens.
Does the enlarged copy make the page scroll sideways?
No. The copy sits inside the lens, which clips it, so nothing outside the lens takes up room on the page, however long the text.
How do I size the lens?
radius in pixels, or --magnify-text-radius in any unit (1.25em by default, so it grows with the text), and scale for its power, or --magnify-text-scale.
Can I style the lens?
rimColor sets the thin rim, any CSS colour; by default it's the text's colour, faint. The lens itself is [data-slot=magnify-text-lens], so a selector can give it a tint or a stronger shadow.
API Reference
MagnifyText
<span> data-slot="magnify-text"
textstring
The text.
radius?number
The lens's radius, in pixels. By default one and a quarter times the
text's size (1.25em), so it scales with the text.
rimColor?string
The lens's rim, any CSS colour. By default the text's colour, faint.
scale?number
How much the lens magnifies. @default 1.6.
render?ReactElement | ((props: object, state: object) => ReactElement)
Replace the host element or compose it with another component.
- Type
ReactElement | ((props: object, state: object) => ReactElement)
className?string
Forwarded to the part.
--magnify-text-radiusstring
The lens's radius (1.25em).
--magnify-text-rimstring
The lens's rim colour.
--magnify-text-scalestring
How much the lens magnifies (1.6).
Related
- Pro
Variable Proximity
InteractiveLetters that swell in place
- Pro
Every detail deserves the spotlightEvery detail deserves the spotlight
Spotlight Text
InteractiveLight the letters instead
- Pro
Xray Text
InteractiveA round hole showing another text
- Pro
Text Pressure
InteractiveWeight and width from the pointer
- Pro
Kerning Text
InteractiveLetters that spread near the pointer
- Pro
Iris Text
EntranceLetters seen through a growing circle