Text Effect

import { TextEffect } from '@/components/sora-ui/texts/text-effect';

export default function HeroTitle() {
  return (
    <TextEffect
      as="h1"
      className="font-bold text-4xl tracking-tight"
      preset="fade-in-blur"
      per="word"
      scrollTrigger
    >
      Animation should not be a black box.
    </TextEffect>
  );
}

'use client';

import { useState } from 'react';
import { TextEffect } from '@/components/sora-ui/texts/text-effect';

export default function LiveLabel() {
  const [visible, setVisible] = useState(true);

  return (
    <button onClick={() => setVisible((current) => !current)} type="button">
      <TextEffect preset="slide" per="char" trigger={visible}>
        {visible ? 'Hide me' : 'Show me'}
      </TextEffect>
    </button>
  );
}

import {
  blurRevealItemVariants,
  TextEffect,
} from '@/components/sora-ui/texts/text-effect';

<TextEffect
  scrollTrigger
  per="word"
  variants={{ item: blurRevealItemVariants({ blur: 4, yOffset: 12 }) }}
>
  Hello world
</TextEffect>