Digital Wave Component 43 – Aceternity UI 渐变光效 组件
A digital wave component 43 component with Aceternity UI style animations and effects, built with React and Tailwind CSS.
@aceternity/gradient-glow-digital-wave-component-43-18c749-demo
tsx
1"use client";
2import React from "react";
3import { motion, useMotionValue, useSpring } from "framer-motion";
4import { cn } from "@/lib/utils";
5
6export const GradientGlowDigitalWaveComponent4318c749 = ({
7 className,
8 children,
9 }) => {
10 const mouseX = useMotionValue(0);
11 const mouseY = useMotionValue(0);
12 const springConfig = { damping: 20, stiffness: 300 };
13 const x = useSpring(mouseX, springConfig);
14 const y = useSpring(mouseY, springConfig);
15
16 const handleMouseMove = (e) => {
17 mouseX.set(e.clientX - e.currentTarget.getBoundingClientRect().left);
18 mouseY.set(e.clientY - e.currentTarget.getBoundingClientRect().top);
19 };
20
21 return (
22 <motion.div
23 onMouseMove={handleMouseMove}
24 className={cn("group relative overflow-hidden", className)}
25 >
26 <motion.div
27 className="pointer-events-none absolute -inset-px opacity-0 transition-opacity group-hover:opacity-100"
28 style={{
29 background: `radial-gradient(300px circle at ${x}px ${y}px, rgba(168,85,247,0.1), transparent 80%)`,
30 }}
31 />
32 {children}
33 </motion.div>
34 );
35};
Installation
npx shadcn@latest add @aceternity/gradient-glow-digital-wave-component-43-18c749
npm install framer-motion clsx tailwind-mergeA digital wave component 43 component with Aceternity UI style animations and effects, built with React and Tailwind CSS.
概述
Digital Wave Component 43 是 Aceternity UI 组件库中的一个精选组件，专为 React + Tailwind CSS 项目设计。它提供了流畅的动画效果和现代化的视觉体验，可以轻松集成到你的项目中。
特性
- React + TypeScript 支持，类型安全
- Tailwind CSS 样式，响应式设计
- Framer Motion 动画引擎，流畅自然
- 复制即用，无需额外安装依赖
- 暗色模式兼容
- SSR/SSG友好，支持 Next.js
使用场景
- 产品落地页 - 为你的产品页面添加视觉冲击力
- 后台管理系统 - 提升管理界面的用户体验
- 个人作品集 - 展示你的技术实力
- SaaS 应用 - 为用户提供现代化的界面
- 内容展示 - 以引人入胜的方式展示内容
技术栈
- React 18+
- Tailwind CSS 3+
- Framer Motion / Motion
- TypeScript（可选）
兼容性
| 框架 | 支持状态 |
|---|---|
| Next.js 14+ | 完全支持 |
| Vite + React | 完全支持 |
| Create React App | 支持 |
| Remix | 支持 |
| Astro + React | 支持 |
- 确保已安装
framer-motion和tailwindcss - 组件使用
"use client"指令，适用于 App Router - 所有组件均支持暗色模式
- 建议在
tailwind.config.js中配置cn工具函数
Examples
Basic Usage
@aceternity/gradient-glow-digital-wave-component-43-18c749-demo
tsx
1"use client";
2import React from "react";
3import { motion, useMotionValue, useSpring } from "framer-motion";
4import { cn } from "@/lib/utils";
5
6export const GradientGlowDigitalWaveComponent4318c749 = ({
7 className,
8 children,
9 }) => {
10 const mouseX = useMotionValue(0);
11 const mouseY = useMotionValue(0);
12 const springConfig = { damping: 20, stiffness: 300 };
13 const x = useSpring(mouseX, springConfig);
14 const y = useSpring(mouseY, springConfig);
15
16 const handleMouseMove = (e) => {
17 mouseX.set(e.clientX - e.currentTarget.getBoundingClientRect().left);
18 mouseY.set(e.clientY - e.currentTarget.getBoundingClientRect().top);
19 };
20
21 return (
22 <motion.div
23 onMouseMove={handleMouseMove}
24 className={cn("group relative overflow-hidden", className)}
25 >
26 <motion.div
27 className="pointer-events-none absolute -inset-px opacity-0 transition-opacity group-hover:opacity-100"
28 style={{
29 background: `radial-gradient(300px circle at ${x}px ${y}px, rgba(168,85,247,0.1), transparent 80%)`,
30 }}
31 />
32 {children}
33 </motion.div>
34 );
35};
With Custom Props
@aceternity/gradient-glow-digital-wave-component-43-18c749-custom-demo
tsx
1"use client";
2import React from "react";
3import { motion } from "framer-motion";
4
5export const GradientGlowDigitalWaveComponent4318c749 = ({ children, className }) => {
6 return (
7 <div className={"relative h-full w-full overflow-hidden bg-neutral-950 " + className}>
8 <motion.div
9 className="absolute inset-0"
10 style={{
11 backgroundImage: "radial-gradient(circle at 50% 50%, rgba(120,70,255,0.15), transparent 50%)",
12 }}
13 animate={{ opacity: [0.5, 1, 0.5] }}
14 transition={{ duration: 4, repeat: Infinity }}
15 />
16 <div className="relative z-10 flex h-full items-center justify-center">
17 {children}
18 </div>
19 </div>
20 );
21};
Props
| Prop | Type | Default | Description | Required |
|---|---|---|---|---|
className |
string |
"" |
Additional CSS classes | No |
children |
React.ReactNode |
- |
Child elements | Yes |
disabled |
boolean |
false |
Disable interactions | No |
onClick |
() => void |
- |
Click handler | No |
intensity |
number |
1 |
Effect intensity | No |
