21:I[86246,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"NavBreadcrumb",1] 22:I[77342,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"PreviewCodeSwitch",1] 23:I[61360,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"InstallationSwitch",1] 24:T45c,"use client"; import { useRef } from "react"; import { motion, useInView } from "motion/react"; interface MaskTextProps { phrases: string[]; className?: string; } export function MaskText({ phrases, className }: MaskTextProps) { const containerRef = useRef(null); const isInView = useInView(containerRef, { once: true, margin: "75%", }); const animation = { initial: { y: "100%" }, enter: (i: number) => ({ y: "0%", transition: { duration: 0.75, ease: [0.33, 1, 0.68, 1], // smooth cubic ease delay: 0.075 * i, // stagger }, }), }; return (

{phrases.map((phrase, index) => (

{phrase}

))}

); } 18:["$","div",null,{"className":"w-full min-w-0","children":["$","div",null,{"className":"w-full px-4 lg:px-6 py-8 pb-[320px] flex flex-col gap-8 min-w-0","children":[["$","$L21",null,{}],["$","div",null,{"className":"flex flex-col gap-3","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h1",null,{"className":"font-manrope font-bold tracking-[-0.04em] leading-none text-foreground text-[30px] md:text-[36px]","children":"Mask Text"}],["$","div",null,{"className":"flex items-center gap-1.5","children":[["$","span",null,{"className":"rounded-full border px-2.5 py-1 text-[10px] font-medium tracking-[0.08em] uppercase leading-none bg-muted border-border text-muted-foreground dark:bg-white/[0.08] dark:border-white/[0.06] dark:text-white/65","children":"Free"}],false]}]]}],["$","p",null,{"className":"font-manrope text-[14px] leading-relaxed text-muted-foreground max-w-2xl","children":"Preview live, install via shadcn or copy the source."}]]}],["$","$L22",null,{"id":"mask-text","demoCode":"import React from 'react'\nimport { MaskText } from './mast-text'\n\nexport const MaskTextDemo = () => {\n return (\n \n )\n}\n"}],["$","section",null,{"className":"flex flex-col gap-6","children":["$","$L23",null,{"shadcnUrl":"https://ui.thommysart.me/r/mask-text.json","componentId":"mask-text","componentCode":"$24","previewCodeForGate":"import React from 'react'\nimport { MaskText } from './mast-text'\n\nexport const MaskTextDemo = () => {\n return (\n \n )\n}\n","demoCode":"import React from 'react'\nimport { MaskText } from './mast-text'\n\nexport const MaskTextDemo = () => {\n return (\n \n )\n}\n","isPro":false,"hasAccess":true,"token":null,"authRedirect":"/auth?redirect=/docs/text/mask-text","tier":"FREE"}]}],"$L25","$L26","$L27","$L28","$L29"]}]}]

Name	Type	Default	Required	Description
phrases	string[]	—	Yes	The text to display
className	string	—	No	Optional class name for the rendered element.

Mask Text

Installation

Install via shadcn

Usage

Props