FreeBackgrounds

Background Showcase

Use this component when you want a dark section background with subtle motion, grid texture, and centered statement copy.

ReactTailwind CSSMotionBackground

The best components you will ever ship

Grid, glow, and motion in one reusable background shell.

Overview

A reusable grid-and-glow background shell for bold landing page statements.

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

<BackgroundShowcase />

Background Showcase.tsx

tsx

"use client";

import { motion } from "framer-motion";

export function BackgroundShowcase() {
  return (
    <div className="relative flex min-h-[320px] items-center justify-center overflow-hidden rounded-xl border border-white/10 bg-zinc-950 p-6 text-white">
      <div className="absolute inset-0 bg-[linear-gradient(to_right,rgba(255,255,255,.08)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,.08)_1px,transparent_1px)] bg-[size:32px_32px] opacity-20" />
      <motion.div
        animate={{ rotate: 360 }}
        transition={{ duration: 18, repeat: Infinity, ease: "linear" }}
        className="absolute h-64 w-64 rounded-full border border-lime-300/20"
      />
      <div className="relative max-w-md text-center">
        <h3 className="text-3xl font-black">
          The best components you will ever ship
        </h3>
        <p className="mt-3 text-sm text-zinc-400">
          Grid, glow, and motion in one reusable background shell.
        </p>
      </div>
    </div>
  );
}