@arolariu/components 0.4.2 → 1.0.0

package/src/components/ui/highlight-text.tsx

@@ -4,24 +4,53 @@ import {motion, useInView, type HTMLMotionProps, type Transition, type UseInView
 import * as React from "react";
 
 import {cn} from "@/lib/utilities";
+import styles from "./highlight-text.module.css";
 
-interface HighlightTextProps extends HTMLMotionProps<"span"> {
+/** Props accepted by {@link HighlightText}. */
+export interface HighlightTextProps extends HTMLMotionProps<"span"> {
+  /** Inline text content that receives the animated highlight sweep. @default undefined */
   text: string;
+  /** Delays the highlight animation until the text enters the viewport. @default false */
   inView?: boolean;
+  /** Margin passed to the in-view observer when `inView` is enabled. @default "0px" */
   inViewMargin?: UseInViewOptions["margin"];
+  /** Prevents the in-view animation from replaying after the first reveal. @default true */
   inViewOnce?: boolean;
+  /** Motion timing used for the highlight fill animation. @default {duration: 2, ease: "easeInOut"} */
   transition?: Transition;
 }
 
 const animation = {backgroundSize: "100% 100%"};
 
+/**
+ * Animates a gradient highlight fill behind inline text content.
+ *
+ * @remarks
+ * - Animated component using the `motion` library
+ * - Renders a `<span>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ * - Client-side only (`"use client"` directive)
+ *
+ * @example
+ * ```tsx
+ * <HighlightText text="Highlighted copy" />
+ * ```
+ *
+ * @see {@link HighlightTextProps} for available props
+ */
 const HighlightText = React.forwardRef<HTMLSpanElement, HighlightTextProps>(
-  ({text, className, inView = false, inViewMargin = "0px", transition = {duration: 2, ease: "easeInOut"}, ...props}, ref) => {
+  (
+    {text, className, inView = false, inViewMargin = "0px", inViewOnce = true, transition = {duration: 2, ease: "easeInOut"}, ...props},
+    ref,
+  ) => {
+    // eslint-disable-next-line sonarjs/no-unused-vars -- removing React key avoids implicit key spreading
+    const {key: _ignoredKey, ...restProps} = props;
     const localRef = React.useRef<HTMLSpanElement>(null);
-    React.useImperativeHandle(ref, () => localRef.current as HTMLSpanElement);
+
+    React.useImperativeHandle(ref, () => localRef.current!, []);
 
     const inViewResult = useInView(localRef, {
-      once: true,
+      once: inViewOnce,
       margin: inViewMargin,
     });
     const isInView = !inView || inViewResult;
@@ -34,21 +63,14 @@ const HighlightText = React.forwardRef<HTMLSpanElement, HighlightTextProps>(
         }}
         animate={isInView ? animation : undefined}
         transition={transition}
-        style={{
-          backgroundRepeat: "no-repeat",
-          backgroundPosition: "left center",
-          display: "inline",
-        }}
-        className={cn(
-          `relative inline-block rounded-lg bg-gradient-to-r from-blue-100 to-purple-100 px-2 py-1 dark:from-blue-500 dark:to-purple-500`,
-          className,
-        )}
-        {...props}>
+        className={cn(styles.highlight, className)}
+        {...restProps}>
         {text}
       </motion.span>
     );
   },
 );
+
 HighlightText.displayName = "HighlightText";
 
-export {HighlightText, type HighlightTextProps};
+export {HighlightText};

package/src/components/ui/hole-background.module.css

@@ -0,0 +1,84 @@
+.root {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.root::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  width: 140%;
+  height: 140%;
+  transform: translate3d(-50%, -50%, 0);
+  background: radial-gradient(ellipse at 50% 55%, transparent 10%, white 50%);
+}
+
+:global(.dark) .root::before,
+:global([data-theme="dark"]) .root::before {
+  background: radial-gradient(ellipse at 50% 55%, transparent 10%, black 50%);
+}
+
+.root::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 5;
+  display: block;
+  width: 100%;
+  height: 100%;
+  transform: translate3d(-50%, -50%, 0);
+  mix-blend-mode: overlay;
+  background: radial-gradient(ellipse at 50% 75%, #a900ff 20%, transparent 75%);
+}
+
+.canvas {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  opacity: 0.1;
+}
+
+:global(.dark) .canvas,
+:global([data-theme="dark"]) .canvas {
+  opacity: 0.2;
+}
+
+.glow {
+  position: absolute;
+  top: -71.5%;
+  left: 50%;
+  z-index: 3;
+  width: 30%;
+  height: 140%;
+  transform: translate3d(-50%, 0, 0);
+  border-bottom-left-radius: 9999px;
+  border-bottom-right-radius: 9999px;
+  background: linear-gradient(20deg, #00f8f1, rgb(255 189 30 / 0.25) 16.5%, #fe848f 33%, rgb(254 132 143 / 0.25) 49.5%, #00f8f1 66%, rgb(0 248 241 / 0.5) 85.5%, #ffbd1e 100%);
+  background-position: 0% 100%;
+  background-size: 100% 200%;
+  opacity: 0.75;
+  mix-blend-mode: plus-darker;
+  filter: blur(48px);
+}
+
+:global(.dark) .glow,
+:global([data-theme="dark"]) .glow {
+  background: linear-gradient(20deg, #00f8f1, rgb(255 189 30 / 0.125) 16.5%, #fe848f 33%, rgb(254 132 143 / 0.125) 49.5%, #00f8f1 66%, rgb(0 248 241 / 0.375) 85.5%, #ffbd1e 100%);
+  mix-blend-mode: plus-lighter;
+}
+
+.scanlines {
+  position: absolute;
+  inset: 0;
+  z-index: 7;
+  opacity: 0.5;
+  mix-blend-mode: overlay;
+  background: repeating-linear-gradient(transparent, transparent 1px, white 1px, white 2px);
+}