Efeitos de texto

Letterpress proof card

Letterpress proof card: Uma prova tipogr?fica de um t?tulo curto que a prensa volta a entintar e imprimir, em que pressionar por mais tempo deposita mais tinta e aprofunda a marca no papel, com cada impress?o numerada.

Every Proof Pulled by Hand

Harbor Street Press, broadside no. 3

Hold longer for a heavier impression

Press and hold the sheet for a heavier impression.

Como usar Letterpress proof card

Letterpress proof card usa o formato de prévia “cartão” com o tema “claro/escuro”.

Personalizar a prévia

Estes controles são passados para a demo. Os valores e limites descrevem a prévia; consulte a implementação para conhecer todas as props.

Controle	Tipo	Valor inicial	Limites da prévia
`text`	`text`	`Every Proof Pulled by Hand`	Até 40 caracteres
`caption`	`text`	`Harbor Street Press, broadside no. 3`	Até 48 caracteres
`ink`	`color`	`#1F2330`	Os metadados não indicam outro limite.
`spotInk`	`color`	`#FF4D8D`	Os metadados não indicam outro limite.
`paper`	`color`	`#EEE7D8`	Os metadados não indicam outro limite.
`pressure`	`number`	`0.55`	De 0 a 1; passo 0.05
`autoPull`	`boolean`	`true`	Os metadados não indicam outro limite.

Para quais frameworks Letterpress proof card está disponível?

Letterpress proof card está disponível para React, Vue, Svelte, Astro, HTML. A prévia usa React; as observações sobre o código se referem a index.tsx. Confira as interações na versão escolhida antes de depender delas.

Quais são as dependências de Letterpress proof card?

Os metadados React não indicam dependências npm adicionais ao React.

Quais detalhes de acessibilidade aparecem em Letterpress proof card?

O código React de Letterpress proof card inclui: elementos nativos (button); atributos e manipuladores (aria-atomic, aria-describedby, aria-hidden, aria-label, aria-live). Estas são observações do código. Verifique os nomes acessíveis, a ordem do foco e o comportamento do teclado na página completa.

Como Letterpress proof card trata a redução de movimento?

Letterpress proof card consulta a preferência de movimento no código React por meio de matchMedia(prefers-reduced-motion). Confira a implementação completa, os estilos compartilhados e a versão escolhida com a redução de movimento ativada; estas observações não garantem que todas as animações parem.

Conecte seu agente

Componentes abertos relacionados

2824Cascading Letter RevealEfeitos de textoUm título que se revela letra por letra com um aumento suave e desbotamento à medida que entra na visualização, e permanece estável quando concluído.

2124Color Band Text RevealEfeitos de textoUma faixa suave de várias cores desliza uma vez através de uma linha de texto com um movimento de entrada e saída, tingindo cada letra à medida que ela passa antes que o texto assuma uma cor sólida.

1962Flowing gradient headlineEfeitos de textoUm título cujas letras são preenchidas por um gradiente móvel de dois tons, de modo que uma faixa brilhante flutua indefinidamente pelas palavras, com um toque suave opcional atrás.

2248Striped shadow headingEfeitos de textoUm título em negrito com um deslocamento de cópia duplicado atrás dele, preenchido com listras diagonais que ficam flutuando como uma longa sombra projetada.

2464Wavy letter headingEfeitos de textoUm título cujas letras seguem uma onda lenta, cada uma atrasada em relação à última, de modo que a linha ondula como uma bandeira sem perder sua linha de base.

1930Shimmer Wave TextEfeitos de textoUma onda de brilho percorre uma linha de texto, iluminando cada caractere por vez antes de diminuir, depois faz uma breve pausa e repete.