react-animated-highlighter 1.0.0

package/README.md

@@ -0,0 +1,123 @@
+# React Animated Highlighter
+
+An animated text highlighter component for React with smooth GSAP animations. Perfect for hero sections, landing pages, and attention-grabbing text effects.
+
+![Demo](./assets/demo.svg)
+
+[![npm version](https://img.shields.io/npm/v/react-animated-highlighter)](https://www.npmjs.com/package/react-animated-highlighter)
+
+## Features
+
+- Smooth GSAP-powered animations
+- Highlighter icon that "draws" across your text
+- Fully customizable colors, timing, and opacity
+- Replay animation on hover option
+- TypeScript support
+- Zero external icon dependencies
+
+## Installation
+
+```bash
+npm install react-animated-highlighter gsap
+```
+
+## Quick Start
+
+```tsx
+import { AnimatedHighlighter } from 'react-animated-highlighter';
+
+function App() {
+  return (
+    <h1>
+      Welcome to <AnimatedHighlighter text="My Website" />
+    </h1>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `text` | `string` | **required** | The text to highlight |
+| `color` | `string` | `'#6ca0dc'` | Highlight color |
+| `fontSize` | `string` | `'30px'` | Font size of the text |
+| `className` | `string` | `''` | Additional CSS class |
+| `showIcon` | `boolean` | `true` | Show the highlighter icon during animation |
+| `highlightOpacity` | `number` | `0.3` | Opacity of the highlight (0-1) |
+| `duration` | `number` | `1.5` | Animation duration in seconds |
+| `delay` | `number` | `0` | Delay before animation starts |
+| `replayOnHover` | `boolean` | `false` | Replay the animation on hover |
+
+## Examples
+
+### Custom Color
+
+```tsx
+<AnimatedHighlighter
+  text="Important!"
+  color="#f59e0b"
+/>
+```
+
+### Slower Animation
+
+```tsx
+<AnimatedHighlighter
+  text="Take your time"
+  duration={3}
+  delay={0.5}
+/>
+```
+
+### No Icon, Just Highlight
+
+```tsx
+<AnimatedHighlighter
+  text="Subtle highlight"
+  showIcon={false}
+  highlightOpacity={0.2}
+/>
+```
+
+### Interactive (Replay on Hover)
+
+```tsx
+<AnimatedHighlighter
+  text="Hover me!"
+  replayOnHover={true}
+/>
+```
+
+### Hero Section Example
+
+```tsx
+<h1 className="text-5xl font-bold">
+  Ship products with{' '}
+  <AnimatedHighlighter
+    text="zero friction"
+    color="#10b981"
+    fontSize="inherit"
+    duration={2}
+  />
+</h1>
+```
+
+## Color Ideas
+
+| Color | Hex | Use Case |
+|-------|-----|----------|
+| Blue | `#6ca0dc` | Default, professional |
+| Emerald | `#10b981` | Success, growth |
+| Amber | `#f59e0b` | Warning, attention |
+| Rose | `#f43f5e` | Important, urgent |
+| Purple | `#8b5cf6` | Creative, premium |
+
+## Requirements
+
+- React 17+
+- GSAP 3+ (peer dependency)
+
+## License
+
+MIT © Ben Jammin

package/dist/index.d.mts

@@ -0,0 +1,26 @@
+import React from 'react';
+
+interface AnimatedHighlighterProps {
+    /** The text to highlight */
+    text: string;
+    /** Highlight color (default: '#6ca0dc') */
+    color?: string;
+    /** Font size (default: '30px') */
+    fontSize?: string;
+    /** Additional CSS class name */
+    className?: string;
+    /** Whether to show the highlighter icon during animation (default: true) */
+    showIcon?: boolean;
+    /** Highlight opacity (default: 0.3) */
+    highlightOpacity?: number;
+    /** Animation duration in seconds (default: 1.5) */
+    duration?: number;
+    /** Delay before animation starts in seconds (default: 0) */
+    delay?: number;
+    /** Whether to replay animation on hover (default: false) */
+    replayOnHover?: boolean;
+}
+
+declare const AnimatedHighlighter: React.FC<AnimatedHighlighterProps>;
+
+export { AnimatedHighlighter, type AnimatedHighlighterProps };

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+
+interface AnimatedHighlighterProps {
+    /** The text to highlight */
+    text: string;
+    /** Highlight color (default: '#6ca0dc') */
+    color?: string;
+    /** Font size (default: '30px') */
+    fontSize?: string;
+    /** Additional CSS class name */
+    className?: string;
+    /** Whether to show the highlighter icon during animation (default: true) */
+    showIcon?: boolean;
+    /** Highlight opacity (default: 0.3) */
+    highlightOpacity?: number;
+    /** Animation duration in seconds (default: 1.5) */
+    duration?: number;
+    /** Delay before animation starts in seconds (default: 0) */
+    delay?: number;
+    /** Whether to replay animation on hover (default: false) */
+    replayOnHover?: boolean;
+}
+
+declare const AnimatedHighlighter: React.FC<AnimatedHighlighterProps>;
+
+export { AnimatedHighlighter, type AnimatedHighlighterProps };

package/dist/index.js

@@ -0,0 +1,190 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AnimatedHighlighter: () => AnimatedHighlighter
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/AnimatedHighlighter.tsx
+var import_react = require("react");
+var import_gsap = __toESM(require("gsap"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var HighlighterIcon = ({ size, color }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m9 11-6 6v3h9l3-3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4" })
+    ]
+  }
+);
+var AnimatedHighlighter = ({
+  text,
+  color = "#6ca0dc",
+  fontSize = "30px",
+  className = "",
+  showIcon = true,
+  highlightOpacity = 0.3,
+  duration = 1.5,
+  delay = 0,
+  replayOnHover = false
+}) => {
+  const containerRef = (0, import_react.useRef)(null);
+  const highlightRef = (0, import_react.useRef)(null);
+  const highlighterRef = (0, import_react.useRef)(null);
+  const timelineRef = (0, import_react.useRef)(null);
+  const runAnimation = (0, import_react.useCallback)(() => {
+    if (!containerRef.current || !highlightRef.current) return;
+    const highlight = highlightRef.current;
+    const highlighter = highlighterRef.current;
+    if (timelineRef.current) {
+      timelineRef.current.kill();
+    }
+    import_gsap.default.set(highlight, {
+      scaleX: 0,
+      transformOrigin: "left"
+    });
+    if (showIcon && highlighter) {
+      import_gsap.default.set(highlighter, {
+        opacity: 0,
+        scale: 0,
+        rotation: -30,
+        x: 0
+      });
+    }
+    const tl = import_gsap.default.timeline({ defaults: { ease: "power2.inOut" }, delay });
+    timelineRef.current = tl;
+    if (showIcon && highlighter) {
+      tl.to(highlighter, {
+        opacity: 1,
+        scale: 1,
+        duration: 0.3
+      }).to(highlight, {
+        scaleX: 1,
+        duration
+      }).to(
+        highlighter,
+        {
+          x: containerRef.current.offsetWidth,
+          duration
+        },
+        "<"
+      ).to(
+        highlighter,
+        {
+          opacity: 0,
+          scale: 0,
+          duration: 0.3
+        },
+        ">-0.3"
+      );
+    } else {
+      tl.to(highlight, {
+        scaleX: 1,
+        duration
+      });
+    }
+  }, [showIcon, duration, delay]);
+  (0, import_react.useEffect)(() => {
+    runAnimation();
+    return () => {
+      if (timelineRef.current) {
+        timelineRef.current.kill();
+      }
+    };
+  }, [runAnimation]);
+  const handleMouseEnter = () => {
+    if (replayOnHover) {
+      runAnimation();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        position: "relative",
+        display: "inline-block",
+        fontSize
+      },
+      onMouseEnter: handleMouseEnter,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              ref: highlightRef,
+              style: {
+                position: "absolute",
+                inset: 0,
+                backgroundColor: color,
+                opacity: highlightOpacity,
+                height: "100%",
+                width: "100%",
+                transform: "skewY(-2deg)"
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { position: "relative" }, children: text })
+        ] }),
+        showIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ref: highlighterRef,
+            style: {
+              position: "absolute",
+              left: 0,
+              top: "50%",
+              pointerEvents: "none",
+              color
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { transform: "translateY(-50%)" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HighlighterIcon, { size: 32, color }) })
+          }
+        )
+      ]
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AnimatedHighlighter
+});

package/dist/index.mjs

@@ -0,0 +1,153 @@
+// src/AnimatedHighlighter.tsx
+import { useEffect, useRef, useCallback } from "react";
+import gsap from "gsap";
+import { jsx, jsxs } from "react/jsx-runtime";
+var HighlighterIcon = ({ size, color }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "m9 11-6 6v3h9l3-3" }),
+      /* @__PURE__ */ jsx("path", { d: "m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4" })
+    ]
+  }
+);
+var AnimatedHighlighter = ({
+  text,
+  color = "#6ca0dc",
+  fontSize = "30px",
+  className = "",
+  showIcon = true,
+  highlightOpacity = 0.3,
+  duration = 1.5,
+  delay = 0,
+  replayOnHover = false
+}) => {
+  const containerRef = useRef(null);
+  const highlightRef = useRef(null);
+  const highlighterRef = useRef(null);
+  const timelineRef = useRef(null);
+  const runAnimation = useCallback(() => {
+    if (!containerRef.current || !highlightRef.current) return;
+    const highlight = highlightRef.current;
+    const highlighter = highlighterRef.current;
+    if (timelineRef.current) {
+      timelineRef.current.kill();
+    }
+    gsap.set(highlight, {
+      scaleX: 0,
+      transformOrigin: "left"
+    });
+    if (showIcon && highlighter) {
+      gsap.set(highlighter, {
+        opacity: 0,
+        scale: 0,
+        rotation: -30,
+        x: 0
+      });
+    }
+    const tl = gsap.timeline({ defaults: { ease: "power2.inOut" }, delay });
+    timelineRef.current = tl;
+    if (showIcon && highlighter) {
+      tl.to(highlighter, {
+        opacity: 1,
+        scale: 1,
+        duration: 0.3
+      }).to(highlight, {
+        scaleX: 1,
+        duration
+      }).to(
+        highlighter,
+        {
+          x: containerRef.current.offsetWidth,
+          duration
+        },
+        "<"
+      ).to(
+        highlighter,
+        {
+          opacity: 0,
+          scale: 0,
+          duration: 0.3
+        },
+        ">-0.3"
+      );
+    } else {
+      tl.to(highlight, {
+        scaleX: 1,
+        duration
+      });
+    }
+  }, [showIcon, duration, delay]);
+  useEffect(() => {
+    runAnimation();
+    return () => {
+      if (timelineRef.current) {
+        timelineRef.current.kill();
+      }
+    };
+  }, [runAnimation]);
+  const handleMouseEnter = () => {
+    if (replayOnHover) {
+      runAnimation();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        position: "relative",
+        display: "inline-block",
+        fontSize
+      },
+      onMouseEnter: handleMouseEnter,
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: highlightRef,
+              style: {
+                position: "absolute",
+                inset: 0,
+                backgroundColor: color,
+                opacity: highlightOpacity,
+                height: "100%",
+                width: "100%",
+                transform: "skewY(-2deg)"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { style: { position: "relative" }, children: text })
+        ] }),
+        showIcon && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: highlighterRef,
+            style: {
+              position: "absolute",
+              left: 0,
+              top: "50%",
+              pointerEvents: "none",
+              color
+            },
+            children: /* @__PURE__ */ jsx("div", { style: { transform: "translateY(-50%)" }, children: /* @__PURE__ */ jsx(HighlighterIcon, { size: 32, color }) })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  AnimatedHighlighter
+};

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "react-animated-highlighter",
+  "version": "1.0.0",
+  "description": "Animated text highlighter component for React with GSAP animations",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0",
+    "gsap": ">=3.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0",
+    "gsap": "^3.12.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "keywords": [
+    "react",
+    "animation",
+    "highlighter",
+    "gsap",
+    "text-animation",
+    "underline",
+    "highlight",
+    "component"
+  ],
+  "author": "Ben Jammin",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/xBenJamminx/react-animated-highlighter"
+  }
+}