Text effects

Code

import { TextFlip } from "@fadymondy/nasaq/web";export const Headline = () => (  <h1>    Run your clinic like a <TextFlip phrases={["team", "studio", "practice"]} />  </h1>);

Typography · beta

Live examples and controls: Text effects in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/text-effects.json

Six effects that give text a little life. Each one keeps the real text in the page for search engines and screen readers, and each one holds still when the visitor prefers reduced motion. Arabic and other joining scripts are cut into words, never letters, because a letter animated alone breaks the joins and reads wrongly.

When to useCopy Anchor Link

• Marketing pages, empty states and onboarding where one moving element helps the eye.
• One effect per screen area. Two flipping phrases in one headline compete.

When not to useCopy Anchor Link

• Body text, tables, forms and anything read closely: motion there is a cost.
• Meaning that only motion carries. Every effect has static text that says the same thing.
• Streaming AI output: use the states in ai-states.

ImportCopy Anchor Link

import { TextFlip, TextShimmer, Marquee, TextReveal, HandwrittenNote, HandwrittenMark, splitText } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

import { TextFlip } from "@fadymondy/nasaq/web";

export const Headline = () => (
  <h1>
    Run your clinic like a <TextFlip phrases={["team", "studio", "practice"]} />
  </h1>
);

AnatomyCopy Anchor Link

TextFlip         data-slot="text-flip"      visible phrase (aria-hidden) + one sr-only list of all phrases
TextShimmer      data-slot="text-shimmer"   text with a moving gradient clipped to it
Marquee          data-slot="marquee"        track with the children repeated; extra copies are aria-hidden and inert
TextReveal       data-slot="text-reveal"    real text for assistive tech + animated word spans (aria-hidden)
HandwrittenNote  data-slot="handwritten-note"   aside with a tape strip and an optional author
HandwrittenMark  data-slot="handwritten-mark"   the words plus an SVG stroke that draws itself

APICopy Anchor Link

TextFlipCopy Anchor Link

TextShimmerCopy Anchor Link

The sweep runs in the reading direction (right to left in Arabic).

MarqueeCopy Anchor Link

Under reduced motion the items wrap into a static row.

TextRevealCopy Anchor Link

HandwrittenNoteCopy Anchor Link

Set --nq-font-handwriting to load a handwriting face you are licensed to use; the default is the system cursive stack. No font file ships with Nasaq.

HandwrittenMarkCopy Anchor Link

Helpers (pure, no React)Copy Anchor Link

splitText(text, mode, locale) returns tokens that join back to the input. countTextTokens, revealTextTokens, nextFlipIndex, marqueeDuration, marqueeCopies and textStaggerDelay are the maths behind the effects.

ExamplesCopy Anchor Link

import { Marquee, TextReveal } from "@fadymondy/nasaq/web";

export const Logos = () => (
  <Marquee speed={40}>
    {["Seatfor", "Mahaam", "Zekra", "Hosbah"].map((n) => <span key={n} className="text-h3">{n}</span>)}
  </Marquee>
);
export const Story = () => <TextReveal as="p" text="Nasaq draws the same product in every language." />;

AccessibilityCopy Anchor Link

• Screen readers get the full text once: TextFlip lists every phrase in visually hidden text, TextReveal keeps the real string, Marquee hides its duplicate copies.
• Rotation and sliding stop while a person hovers or focuses inside, so they can read and click.
• Reduced motion: TextFlip shows the first phrase, TextShimmer and Marquee hold still, TextReveal and HandwrittenMark show the finished result at once.
• No effect carries information that the plain text does not.

RTL & i18nCopy Anchor Link

• Arabic and other joining scripts split into words (hasJoiningScript), never letters.
• The shimmer and the marquee follow the reading direction; the marquee direction is logical (start / end).
• Numbers inside phrases stay in their own order; use <bdi> around codes.

Styling & tokensCopy Anchor Link

Colours come from --nq-* tokens and the tag colours (notes and marks). Target the data-slot values above, or use className and style.

Do / Don'tCopy Anchor Link

• Do keep phrases of similar length so the headline does not jump.
• Do use HandwrittenMark once or twice a page; it is a highlighter, not a texture.
• Don't flip long sentences; flip a word or a short phrase.
• Don't put a marquee of important links where people must click them while they move.

RelatedCopy Anchor Link

• ai-states
• screenshot-frame

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-typography-text-effects--docs