āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/ibelick/motion-primitives/spotlight/page ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
export const metadata = { title: 'Spotlight - Motion-Primitives', description: 'A dynamic spotlight effect component that follows cursor movement. Built for React, Next.js, and Tailwind CSS.', };
import { SpotlightBasic } from './spotlight-basic'; import { SpotlightCustomColor } from './spotlight-custom-color'; import { SpotlightBorder } from './spotlight-border'; import ComponentCodePreview from '@/components/website/component-code-preview';
A dynamic spotlight effect component that follows cursor movement.
<ComponentCodePreview component={<SpotlightBasic />} filePath='app/docs/spotlight/spotlight-basic.tsx' classNameComponentContainer='px-4' />
You can customize the color with using Tailwind CSS gradient color stop. (e.g from-blue-800 via-blue-600 to-blue-400)
<ComponentCodePreview component={<SpotlightCustomColor />} filePath='app/docs/spotlight/spotlight-custom-color.tsx' classNameComponentContainer='px-4' />
You can create a spotlight border by creating a container with a padding that will be used as a border.
<ComponentCodePreview component={<SpotlightBorder />} filePath='app/docs/spotlight/spotlight-border.tsx' classNameComponentContainer='px-4' />
<Step>Copy and paste the following code into your project.</Step>
<CodeBlock filePath='components/core/spotlight.tsx' /><Step>Update the import paths to match your project setup.</Step>
</Steps> </TabsContent> </Tabs> ## Component API| Prop | Type | Default | Description |
| :------------ | :------------ | :-------------- | :------------------------------------- |
| className | string | '' | Additional CSS classes for styling |
| size | number | 200 | Size of the spotlight effect in pixels |
| springOptions | SpringOptions | { bounce: 0 } | Animation spring configuration |
Initiated by @divyanshu-vashishth
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā