Carbon Glow Component 17 – Aceternity UI 导航组件 组件
A carbon glow component 17 component with Aceternity UI style animations and effects, built with React and Tailwind CSS.
@aceternity/navigation-carbon-glow-component-17-821fa4-demo
"use client";
import React from "react";
import { motion } from "framer-motion";
export const NavigationCarbonGlowComponent17821fa4 = ({ text, className }) => {
const words = text.split(" ");
return (
<motion.h1 className={className}>
{words.map((word, i) => (
<motion.span
key={i}
initial={{ opacity: 0, filter: "blur(10px)" }}
animate={{ opacity: 1, filter: "blur(0px)" }}
transition={{ delay: i * 0.1 }}
className="inline-block mr-2"
>
{word}
</motion.span>
))}
</motion.h1>
);
};安装
npx shadcn@latest add @aceternity/navigation-carbon-glow-component-17-821fa4
A carbon glow component 17 component with Aceternity UI style animations and effects, built with React and Tailwind CSS.
## 概述
Carbon Glow Component 17 是 Aceternity UI 组件库中的一个精选组件，专为 React + Tailwind CSS 项目设计。它提供了流畅的动画效果和现代化的视觉体验，可以轻松集成到你的项目中。
## 特性
- **React + TypeScript** 支持，类型安全
- **Tailwind CSS** 样式，响应式设计
- **Framer Motion** 动画引擎，流畅自然
- **复制即用**，无需额外安装依赖
- **暗色模式**兼容
- **SSR/SSG**友好，支持 Next.js
## 使用场景
1. **产品落地页** - 为你的产品页面添加视觉冲击力
2. **后台管理系统** - 提升管理界面的用户体验
3. **个人作品集** - 展示你的技术实力
4. **SaaS 应用** - 为用户提供现代化的界面
5. **内容展示** - 以引人入胜的方式展示内容
## 技术栈
- 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/navigation-carbon-glow-component-17-821fa4-demo
"use client";
import React from "react";
import { motion } from "framer-motion";
export const NavigationCarbonGlowComponent17821fa4 = ({ text, className }) => {
const words = text.split(" ");
return (
<motion.h1 className={className}>
{words.map((word, i) => (
<motion.span
key={i}
initial={{ opacity: 0, filter: "blur(10px)" }}
animate={{ opacity: 1, filter: "blur(0px)" }}
transition={{ delay: i * 0.1 }}
className="inline-block mr-2"
>
{word}
</motion.span>
))}
</motion.h1>
);
};With Custom Props
@aceternity/navigation-carbon-glow-component-17-821fa4-custom-demo
"use client";
import React from "react";
import { motion, useMotionValue, useTransform, useSpring } from "framer-motion";
export const NavigationCarbonGlowComponent17821fa4 = ({ children, className }) => {
const x = useMotionValue(0);
const y = useMotionValue(0);
const rotateX = useTransform(y, [-100, 100], [10, -10]);
const rotateY = useTransform(x, [-100, 100], [-10, 10]);
const springX = useSpring(rotateX, { damping: 20 });
const springY = useSpring(rotateY, { damping: 20 });
return (
<motion.div
onMouseMove={(e) => {
const rect = e.currentTarget.getBoundingClientRect();
x.set(e.clientX - rect.left - rect.width / 2);
y.set(e.clientY - rect.top - rect.height / 2);
}}
onMouseLeave={() => { x.set(0); y.set(0); }}
style={{ rotateX: springX, rotateY: springY, transformPerspective: 1000 }}
className={className}
>
{children}
</motion.div>
);
};Advanced Configuration
@aceternity/navigation-carbon-glow-component-17-821fa4-advanced-demo
"use client";
import React from "react";
import { motion } from "framer-motion";
export const NavigationCarbonGlowComponent17821fa4 = ({ children, className }) => {
return (
<div className={"relative h-full w-full overflow-hidden bg-neutral-950 " + className}>
<motion.div
className="absolute inset-0"
style={{
backgroundImage: "radial-gradient(circle at 50% 50%, rgba(120,70,255,0.15), transparent 50%)",
}}
animate={{ opacity: [0.5, 1, 0.5] }}
transition={{ duration: 4, repeat: Infinity }}
/>
<div className="relative z-10 flex h-full items-center justify-center">
{children}
</div>
</div>
);
};Props
| Prop | Type | Default | Description | Required |
|---|---|---|---|---|
className |
string |
"" |
Additional CSS classes | No |
children |
React.ReactNode |
- |
Child elements | Yes |
color |
string |
"#a855f7" |
Primary color | No |
disabled |
boolean |
false |
Disable interactions | No |
