Fadein

Text 7

About

A simple Fade In animation

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Fadein to your project and fits it to your theme.

Code

How Fadein is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { FadeContent } from "@/components/ui/fadein"; 

const DemoOne = () => {

  const blurEffect: boolean = true;
  const animationDuration: number = 1000;
  const animationEasing: string = "ease-out";
  const opacityInitial: number = 0;


  return (
    <div className="flex flex-col w-full min-h-screen justify-center items-center 
                   p-4
                   bg-white text-black 
                   dark:bg-black dark:text-white 
                   transition-colors duration-300">
      
      <FadeContent
        blur={blurEffect}
        duration={animationDuration}
        easing={animationEasing}
        initialOpacity={opacityInitial}

      >
        <div className="px-10 py-6 rounded-2xl border
                        text-lg font-semibold text-center
                        
                        bg-white text-black border-neutral-300 
                        dark:bg-black dark:text-white dark:border-neutral-700 
                        
                        transition-colors duration-300">
          Content to Fade In
        </div>
      </FadeContent>
      
    </div>
  );
};

export { DemoOne };