Todos os componentes

Morphing Text

Morphing Text é um componente de texto para React e Tailwind CSS, da biblioteca Motion Primitives, com licença MIT. Copia e cola no teu projeto.

Motion Primitives MIT text

O que é

Morphing Text é um componente de texto para React e Tailwind CSS, da biblioteca Motion Primitives, com licença MIT. Copia e cola no teu projeto.

Como usar

Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.

Abrir no catálogo

Cinco cópias grátis por mês. Sem cartão.

Não precisa de pacotes além do que o projeto já tem

Licença

Este componente vem de Motion Primitives e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.

Morphing Text

app/docs/text-morph/text-morph-input.tsx
'use client';
import { useState } from 'react';
import { TextMorph } from '../../../components/core/text-morph';

export function TextMorphInput() {
  const [text, setText] = useState('Craft');

  return (
    <div className='flex flex-col items-center justify-end space-y-12'>
      <TextMorph className='text-5xl font-medium text-black dark:text-white'>
        {text}
      </TextMorph>
      <input
        type='text'
        value={text}
        onChange={(e) => setText(e.target.value)}
        className='h-9 w-full rounded-lg border border-zinc-950/10 bg-transparent p-2 text-zinc-900 placeholder-zinc-500 focus:outline-hidden dark:border-zinc-50/10 dark:text-white dark:placeholder-zinc-400'
        placeholder='Type your text here'
      />
    </div>
  );
}

Componentes parecidos