Effect Demo

PreviousNext

Demo showing an animated effect.

Docs
animate-uiui

Preview

Loading preview…
registry/demo/primitives/effects/effect/index.tsx
import { Effect } from '@/components/animate-ui/primitives/effects/effect';

type EffectDemoProps = {
  delay?: number;
  blur?: boolean;
  slide?: boolean;
  fade?: boolean;
  zoom?: boolean;
};

export default function EffectDemo({
  delay = 0,
  blur = false,
  slide = false,
  fade = false,
  zoom = false,
}: EffectDemoProps) {
  return (
    <Effect
      delay={delay}
      blur={blur}
      slide={slide}
      fade={fade}
      zoom={zoom}
      className="px-6 py-4 bg-accent"
    >
      Effect
    </Effect>
  );
}

Installation

npx shadcn@latest add @animate-ui/demo-primitives-effects-effect

Usage

import { DemoPrimitivesEffectsEffect } from "@/components/ui/demo-primitives-effects-effect"
<DemoPrimitivesEffectsEffect />