Skip to content
🚀New: AI Agent development service now live. Book a free discovery call →
FreeText Effects

Cover

Use this component for hero headlines, feature callouts, and landing page statements where one phrase should feel charged with motion.

ReactTailwind CSSMotionHero

Build amazing websites
at warp speed

Overview

A headline cover effect with an animated beam and highlighted word container.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash
npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash
npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash
npm install framer-motion

Usage

tsx
<CoverBeam />

Cover.tsx

tsx
"use client";

import { motion } from "framer-motion";

export function CoverBeam() {
  return (
    <div className="relative flex min-h-[320px] items-center justify-center overflow-hidden rounded-xl border border-white/10 bg-black p-8 text-white">
      <motion.div
        animate={{ x: ["-120%", "120%"] }}
        transition={{ duration: 2.8, repeat: Infinity, ease: "linear" }}
        className="absolute top-1/2 h-20 w-1/2 rounded-full bg-lime-300/10 blur-2xl"
      />
      <h3 className="relative text-center text-4xl font-black leading-tight">
        Build amazing websites<br />
        at{" "}
        <span className="relative inline-block overflow-hidden rounded-md border border-white/10 bg-white/[0.06] px-3 py-1">
          <motion.span
            animate={{ opacity: [0.3, 1, 0.3] }}
            transition={{ duration: 1.5, repeat: Infinity }}
            className="absolute inset-0 bg-lime-300/10"
          />
          <span className="relative">warp speed</span>
        </span>
      </h3>
    </div>
  );
}