Split Text Effect Demo 3

PreviousNext

A demo of the Split Text Effect component with variants

Docs
buchariteshexample

Preview

Loading preview…
registry/example/split-text-effect-demo-3.tsx
import { SplitTextEffect } from '@/registry/bucharitesh/split-text-effect';

export default function SplitTextEffectDemo() {
  return (
    <div className="relative w-full bg-black">
      <div className="h-72">
        <SplitTextEffect
          text={
            <>
              Security that <br /> scales with you.
            </>
          }
          fill={0.45}
          accent="#006efe"
        />
      </div>
    </div>
  );
}

Installation

npx shadcn@latest add @bucharitesh/split-text-effect-demo-3

Usage

import { SplitTextEffectDemo3 } from "@/components/split-text-effect-demo-3"
<SplitTextEffectDemo3 />