FreeText Effects

Pointer Highlight

Use this component for hero headlines, editorial callouts, and feature sections where one word needs a visual punch.

ReactTailwind CSSMotionPointer

The best way to grow is to collaborate

Plan

Build

Launch

Overview

A headline highlight effect with an animated pointer and bordered word emphasis.

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

<PointerHighlight />

Pointer Highlight.tsx

tsx

"use client";

import { motion } from "framer-motion";

export function PointerHighlight() {
  return (
    <section className="relative overflow-hidden rounded-xl border border-white/10 bg-black p-6 text-white">
      <h3 className="max-w-2xl text-5xl font-black leading-tight">
        The best way to grow is to{" "}
        <span className="relative inline-block border border-white px-1">
          collaborate
          <motion.span
            animate={{ x: [0, 14, 0], y: [0, 8, 0] }}
            transition={{ duration: 1.8, repeat: Infinity }}
            className="absolute -bottom-6 left-2 h-0 w-0 border-l-[10px] border-r-[10px] border-t-[16px] border-l-transparent border-r-transparent border-t-sky-500"
          />
        </span>
      </h3>
      <div className="mt-8 grid grid-cols-3 gap-4 opacity-60">
        {["Plan", "Build", "Launch"].map((item) => (
          <div key={item} className="h-20 rounded-lg bg-white/[0.06] p-3 text-xs">
            {item}
          </div>
        ))}
      </div>
    </section>
  );
}