feat: add spotlight

src/SpotlightText/SpotlightText.module.css

@@ -0,0 +1,41 @@
+.spotlight {
+  color: #333;
+  margin: 0;
+  padding: 0;
+  font-size: 8rem;
+  letter-spacing: -0.3rem;
+  position: relative;
+}
+
+.spotlight::after {
+  content: attr(data-spotlight);
+  color: transparent;
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-clip-path: ellipse(100px 100px at 0% 50%);
+  clip-path: ellipse(100px 100px at 0% 50%);
+  animation: spotlight 5s infinite;
+  background-image: url(https://images.unsplash.com/photo-1579547621869-0ddb5f237392?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80);
+  background-size: 150%;
+  background-position: center center;
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+
+@keyframes spotlight {
+  0% {
+    -webkit-clip-path: ellipse(100px 100px at 0% 50%);
+    clip-path: ellipse(100px 100px at 0% 50%);
+  }
+
+  50% {
+    -webkit-clip-path: ellipse(100px 100px at 100% 50%);
+    clip-path: ellipse(100px 100px at 100% 50%);
+  }
+
+  100% {
+    -webkit-clip-path: ellipse(100px 100px at 0% 50%);
+    clip-path: ellipse(100px 100px at 0% 50%);
+  }
+}

src/SpotlightText/SpotlightText.stories.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import SpotlightText from "./SpotlightText";
+import { fn } from '@storybook/test';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+	title: 'SpotlightText',
+	component: SpotlightText,
+	parameters: {
+		// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+		layout: 'centered',
+	},
+	// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+	tags: ['autodocs'],
+	// More on argTypes: https://storybook.js.org/docs/api/argtypes
+	argTypes: {
+		style: { backgroundColor: { control: 'color' } }
+	},
+} satisfies Meta<typeof SpotlightText>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+	args: {
+		text: "example content",
+	},
+};

src/SpotlightText/SpotlightText.tsx

@@ -0,0 +1,15 @@
+import { HTMLAttributes } from "react";
+import styles from "./SpotlightText.module.css";
+
+export interface SpotlightTextProps extends HTMLAttributes<HTMLDivElement> {
+	text?: string;
+}
+
+export default function SpotlightText(props: SpotlightTextProps) {
+	const { className, text = "Hello World!", ...rest } = props;
+	return (
+		<div data-spotlight={text} className={styles.spotlight + " " + className} {...rest}>
+			{text}
+		</div>
+	)
+}