Warp Background

Backgrounds 132

About

Here is Warp Background animation

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

Code

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

Usage.tsx

// demo.tsx
'use client';

import * as React from "react";
import {
   Card,
   CardContent,
   CardDescription,
   CardTitle,
} from "@/components/ui/card";
import { Component } from "@/components/ui/warp-background";
import { cn } from "@/lib/utils";


const DemoOne = () => {
   return (
      <div className={cn("flex w-full min-h-screen justify-center items-center bg-background p-4")}>
         <Component>
            <Card className="w-80">
               <CardContent className="flex flex-col gap-2 p-4">
                  <CardTitle>Congratulations on Your Promotion!</CardTitle>
                  <CardDescription>
                     Your hard work and dedication have paid off. We're
                     thrilled to see you take this next step in your career. Keep
                     up the fantastic work!
                  </CardDescription>
               </CardContent>
            </Card>
         </Component>
      </div>
   );
};

export default DemoOne;