Spotlight
A spotlight effect with Tailwind CSS, good for drawing attention to a particular element on the page.
Spotlight
is the new trend.
Spotlight effect is a great way to draw attention to a specific part of the page. Here, we are drawing the attention towards the text section of the page. I don't know why but I'm running out of copy.
Installation
Install dependencies
npm i framer-motion clsx tailwind-mergeAdd util file
utils/cn.ts
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}Copy the source code
components/ui/Spotlight.tsx
import React from "react";
import { cn } from "@/utils/cn";
type SpotlightProps = {
className?: string;
fill?: string;
};
export const Spotlight = ({ className, fill }: SpotlightProps) => {
return (
<svg
className={cn(
"animate-spotlight pointer-events-none absolute z-[1] h-[169%] w-[138%] lg:w-[84%] opacity-0",
className
)}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 3787 2842"
fill="none"
>
<g filter="url(#filter)">
<ellipse
cx="1924.71"
cy="273.501"
rx="1924.71"
ry="273.501"
transform="matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)"
fill={fill || "white"}
fillOpacity="0.21"
></ellipse>
</g>
<defs>
<filter
id="filter"
x="0.860352"
y="0.838989"
width="3785.16"
height="2840.26"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
></feBlend>
<feGaussianBlur
stdDeviation="151"
result="effect1_foregroundBlur_1065_8"
></feGaussianBlur>
</filter>
</defs>
</svg>
);
};Copy the highlighted spotlight animation into tailwind.config.js file
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{ts,tsx}"],
darkMode: "class",
theme: {
extend: {
animation: {
spotlight: "spotlight 2s ease .75s 1 forwards",
},
keyframes: {
spotlight: {
"0%": {
opacity: 0,
transform: "translate(-72%, -62%) scale(0.5)",
},
"100%": {
opacity: 1,
transform: "translate(-50%,-40%) scale(1)",
},
},
},
},
},
plugins: [],
};Props
| Prop name | Type | Description |
|---|---|---|
className | string | The class name of the spotlight component. |
fill | string | Hex color for the spotlight fill. |
This component is inspired from TypeHero's landing page