Marble Pulse Component 80 – Aceternity UI 价格展示 组件

A marble pulse component 80 component with Aceternity UI style animations and effects, built with React and Tailwind CSS.

Aceternity UI Marble Pulse Component 80 价格展示 React Tailwind CSS
@aceternity/pricing-display-marble-pulse-component-80-206f99-demo
Marble Pulse Component 80 – Aceternity UI 价格展示 组件
tsx 
1"use client";
2import React from "react";
3import { motion } from "framer-motion";
4
5export const PricingDisplayMarblePulseComponent80206f99 = ({ 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};

Installation

npx shadcn@latest add @aceternity/pricing-display-marble-pulse-component-80-206f99 
npm install framer-motion clsx tailwind-merge

A marble pulse component 80 component with Aceternity UI style animations and effects, built with React and Tailwind CSS.

概述

Marble Pulse Component 80 是 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/pricing-display-marble-pulse-component-80-206f99-demo
Basic Usage
tsx 
1"use client";
2import React from "react";
3import { motion } from "framer-motion";
4
5export const PricingDisplayMarblePulseComponent80206f99 = ({ 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};

With Custom Props

@aceternity/pricing-display-marble-pulse-component-80-206f99-custom-demo
With Custom Props
tsx 
1"use client";
2import React from "react";
3import { motion } from "framer-motion";
4
5export const PricingDisplayMarblePulseComponent80206f99 = ({ text, className }) => {
6  const words = text.split(" ");
7  return (
8    <motion.h1 className={className}>
9      {words.map((word, i) => (
10        <motion.span
11          key={i}
12          initial={{ opacity: 0, filter: "blur(10px)" }}
13          animate={{ opacity: 1, filter: "blur(0px)" }}
14          transition={{ delay: i * 0.1 }}
15          className="inline-block mr-2"
16        >
17          {word}
18        </motion.span>
19      ))}
20    </motion.h1>
21  );
22};

Advanced Configuration

@aceternity/pricing-display-marble-pulse-component-80-206f99-advanced-demo
Advanced Configuration
tsx 
1"use client";
2import React from "react";
3import { motion } from "framer-motion";
4
5export const PricingDisplayMarblePulseComponent80206f99 = ({ 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
intensity number 1 Effect intensity No
variant "default" | "outline" | "ghost" "default" Visual variant No
duration number 0.5 Animation duration in seconds No
delay number 0 Animation delay in seconds No

相关组件

Conic Gradient – Aceternity UI 组件

Conic Gradient – Aceternity UI 组件
Coral Pulse Component 83 – Aceternity UI 文字动画 组件

Coral Pulse Component 83 – Aceternity UI 文字动画 组件
Stellar Pulse Component 70 – Aceternity UI 3D 卡片 组件

Stellar Pulse Component 70 – Aceternity UI 3D 卡片 组件
Satin Pulse Component 82 – Aceternity UI 按钮组件 组件

Satin Pulse Component 82 – Aceternity UI 按钮组件 组件