Todos os componentes

Animated Beam, One Way

Animated Beam, One Way é um componente de efeito para React e Tailwind CSS, da biblioteca UI Layouts, com licença MIT. Copia e cola no teu projeto.

UI Layouts MIT effects

O que é

Animated Beam, One Way é um componente de efeito para React e Tailwind CSS, da biblioteca UI Layouts, 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 UI Layouts e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.

Animated Beam, One Way

./registry/components/animated-beam/unidirectional.tsx

'use client';

import { AnimatedBeam, Circle, Icons } from '@/components/ui/animated-beam';
import { cn } from '@/lib/utils';
import React, { forwardRef, useRef } from 'react';

export default function AnimatedBeamUnidirectional() {
  const containerRef = useRef<HTMLDivElement>(null);
  const div1Ref = useRef<HTMLDivElement>(null);
  const div2Ref = useRef<HTMLDivElement>(null);

  return (
    <div
      className='relative flex w-full max-w-[500px] mx-auto items-center justify-center overflow-hidden rounded-lg border dark:bg-neutral-800 bg-neutral-50 lg:p-10 sm:p-4 p-2 md:shadow-xl'
      ref={containerRef}
    >
      <div className='flex h-full w-full flex-col items-stretch justify-between gap-10'>
        <div className='flex flex-row justify-between'>
          <Circle className='p-2' ref={div1Ref}>
            <Icons.logo />
          </Circle>
          <Circle ref={div2Ref}>
            <Icons.user />
          </Circle>
        </div>
      </div>

      <AnimatedBeam
        duration={3}
        containerRef={containerRef}
        fromRef={div1Ref}
        toRef={div2Ref}
        dotted
        dotSpacing={5}
      />
    </div>
  );
}

Componentes parecidos