Generative AI Shimmer

Installation

npx kinetic-ui-cli@latest add generative-ai-shimmer

How It Works

The GenerativeAiShimmer component splits text into words and applies a heavily staggered framer-motion animation. The secret to the "materialization" effect is animating the CSS filter property from a massive blur(20px) down to 0px, combined with a subtle scale-down and a custom bouncy easing curve. This perfectly simulates the aesthetic of a generative AI engine writing text in real-time.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { GenerativeAiShimmer } from "@/components/creative/generative-ai-shimmer";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { GenerativeAiShimmer } from "@/components/creative/generative-ai-shimmer";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <GenerativeAiShimmer
        text="example"
      />
    </div>
  );
}