Componentdata-display

Spinning Circular Text

Stable

Uma palavra disposta em círculo, girando devagar — um selo, um carimbo, a marca no canto de um hero. O anel é uma figura da palavra, não a palavra: ele sai da árvore de acessibilidade e o texto é anunciado uma vez, inteiro. O raio vem do espaçamento pedido, então o anel cresce com o número de caracteres em vez de amontoá-los.

Instalação

npx up-web-ds add spinning-circular-text

Preview

Basic

Sizes

Spacing

With Mark

Timing

Per Character

All states

Basic

Sizes

Spacing

With Mark

Timing

Per Character

Usage

@/components/spinning-circular-text

import {
  SpinningCircularText,
} from '@/components/spinning-circular-text'

Spinning Circular Text

<SpinningCircularText text="up web studio · design system · " />

Props

Props de SpinningCircularText
Prop	Type	Default	Description
text, obrigatória	`string`	sem valor padrão	The text laid around the circle, and the item's accessible name.
charSpacing	`number`	`1`	Spacing between characters, as a multiple of a character's own width. Larger values push the ring outwards rather than spreading the text.
fontSize	`string`	`'1rem'`	Size of a character, as any CSS length. The ring is sized from it, so this is what scales the whole component.
renderChar	`((char: string, index: number) => React.ReactNode)`	sem valor padrão	Customise how each character is rendered, e.g. to wrap it in a `motion.span` for per-character effects. The returned node is placed inside a positioned wrapper, so positioning is handled for you.
spinClassName	`string`	sem valor padrão	Class names applied to the spinning ring, e.g. `duration-[10s]` to retime the loop -- the animation reads `--tw-duration`, which is the variable a native `duration-*` sets. It cannot switch the animation off: `animation` is a shorthand, so an `animate-none` next to it wins or loses on where the two land in the sheet. What turns the loop off is the reader's own preference, which the component already honours.

Estende Omit< React.ComponentProps<'div'>, 'children' >. Aceita também os atributos padrão de um elemento React (279 não listados).

prop obrigatória.

Metadata

Notas de acessibilidade

Verificado em tests/e2e/spinning-circular-text.spec.ts no Chromium desktop e mobile, em light e dark, com Axe sem violações WCAG 2.2 AA. Teclado: o componente é texto, não é interativo e não entra na sequência de Tab — não há superfície onde teclado ou alvo de toque possam falhar; verificado em navegador que nenhum Tab pousa dentro dele. Leitor de tela verificado por teste e pela árvore de acessibilidade do navegador: o anel é aria-hidden, porque lido caractere a caractere ele é ruído, e o nome acessível vem de uma cópia sr-only do texto inteiro — inclusive quando `renderChar` troca o desenho de cada caractere. `Array.from` percorre code points, então um caractere acentuado ou um emoji continua sendo um caractere no anel e no texto anunciado. Reduced motion verificado em navegador com prefers-reduced-motion: reduce — o giro é ambiente: não termina, nada espera por ele e ele não comunica nada que o texto já não diga, então é aplicado em `motion-safe:animate-spin-ccw` e sob reduce simplesmente não roda. O anel em si nunca é condicionado: ele para, legível, em vez de desaparecer. Touch verificado em viewport de 375px com emulação de toque: o selo é dimensionado pelo `fontSize` e não provoca rolagem horizontal.

Classificação

Layer: Component
Domínio: Application
Categoria: data-display
Status: Stable

Origem e distribuição

Fonte: ncdai registry / spinning-circular-text
Licença: MIT
URL: https://chanhdai.com/r/spinning-circular-text.json
Distribuição: Interna

Acessibilidade

Teclado: revisado
Leitor de tela: revisado
Touch: revisado
Reduced motion: revisado

Dependências

Pacotes: Nenhuma
Ícones: Nenhum
Construído sobre: Nenhum
Usado por: Nenhum ainda