Obsidian Wave Component 49 – Aceternity UI 3D 卡片 组件
A obsidian wave component 49 component with Aceternity UI style animations and effects, built with React and Tailwind CSS.
@aceternity/3d-cards-obsidian-wave-component-49-1b261a-demo
Make things float in air
Hover over this card to unleash the power of CSS perspective
tsx
1"use client";
2import React from "react";
3import { motion } from "framer-motion";
4import { cn } from "@/lib/utils";
5
6export const 3dCardsObsidianWaveComponent491b261a = ({ children, className, onClick }) => {
7 return (
8 <motion.button
9 whileHover={{ scale: 1.05 }}
10 whileTap={{ scale: 0.95 }}
11 onClick={onClick}
12 className={cn(
13 "relative inline-flex h-12 overflow-hidden rounded-full p-px",
14 "bg-gradient-to-r from-indigo-500 to-purple-500",
15 className
16 )}
17 >
18 <span className="relative z-10 flex h-full w-full items-center justify-center rounded-full bg-neutral-950 px-6 py-1 text-white">
19 {children}
20 </span>
21 <motion.span
22 className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent"
23 initial={{ x: "-100%" }}
24 whileHover={{ x: "100%" }}
25 transition={{ duration: 0.5 }}
26 />
27 </motion.button>
28 );
29};
Installation
npx shadcn@latest add @aceternity/3d-cards-obsidian-wave-component-49-1b261a
npm install framer-motion clsx tailwind-mergeA obsidian wave component 49 component with Aceternity UI style animations and effects, built with React and Tailwind CSS.
概述
Obsidian Wave Component 49 是 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/3d-cards-obsidian-wave-component-49-1b261a-demo
tsx
1"use client";
2import React from "react";
3import { motion } from "framer-motion";
4import { cn } from "@/lib/utils";
5
6export const 3dCardsObsidianWaveComponent491b261a = ({ children, className, onClick }) => {
7 return (
8 <motion.button
9 whileHover={{ scale: 1.05 }}
10 whileTap={{ scale: 0.95 }}
11 onClick={onClick}
12 className={cn(
13 "relative inline-flex h-12 overflow-hidden rounded-full p-px",
14 "bg-gradient-to-r from-indigo-500 to-purple-500",
15 className
16 )}
17 >
18 <span className="relative z-10 flex h-full w-full items-center justify-center rounded-full bg-neutral-950 px-6 py-1 text-white">
19 {children}
20 </span>
21 <motion.span
22 className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent"
23 initial={{ x: "-100%" }}
24 whileHover={{ x: "100%" }}
25 transition={{ duration: 0.5 }}
26 />
27 </motion.button>
28 );
29};
With Custom Props
@aceternity/3d-cards-obsidian-wave-component-49-1b261a-custom-demo
tsx
1"use client";
2import React from "react";
3import { motion } from "framer-motion";
4import { cn } from "@/lib/utils";
5
6export const 3dCardsObsidianWaveComponent491b261a = ({
7 className,
8 children,
9 ...props
10}) => {
11 return (
12 <motion.div
13 whileHover={{ scale: 1.02 }}
14 transition={{ type: "spring", stiffness: 300 }}
15 className={cn(
16 "relative rounded-2xl border border-neutral-200 bg-white p-6 shadow-lg",
17 "dark:border-neutral-800 dark:bg-neutral-900",
18 className
19 )}
20 {...props}
21 >
22 {children}
23 </motion.div>
24 );
25};
Props
| Prop | Type | Default | Description | Required |
|---|---|---|---|---|
className |
string |
"" |
Additional CSS classes | No |
children |
React.ReactNode |
- |
Child elements | Yes |
disabled |
boolean |
false |
Disable interactions | No |
intensity |
number |
1 |
Effect intensity | No |
