Stellar Glow Component 10 – Aceternity UI 背景特效 组件

A stellar glow component 10 component with Aceternity UI style animations and effects, built with React and Tailwind CSS.

Aceternity UI Stellar Glow Component 10 背景特效 React Tailwind CSS
@aceternity/backgrounds-stellar-glow-component-10-8d6b53-demo
Stellar Glow Component 10 – Aceternity UI 背景特效 组件
tsx 
1"use client";
2import React from "react";
3import { motion } from "framer-motion";
4import { cn } from "@/lib/utils";
5
6export const BackgroundsStellarGlowComponent108d6b53 = ({ 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/backgrounds-stellar-glow-component-10-8d6b53 
npm install framer-motion clsx tailwind-merge

A stellar glow component 10 component with Aceternity UI style animations and effects, built with React and Tailwind CSS.

概述

Stellar Glow Component 10 是 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/backgrounds-stellar-glow-component-10-8d6b53-demo
Basic Usage
tsx 
1"use client";
2import React from "react";
3import { motion } from "framer-motion";
4import { cn } from "@/lib/utils";
5
6export const BackgroundsStellarGlowComponent108d6b53 = ({
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};

With Custom Props

@aceternity/backgrounds-stellar-glow-component-10-8d6b53-custom-demo
With Custom Props
tsx 
1"use client";
2import React from "react";
3import { motion, useMotionValue, useTransform, useSpring } from "framer-motion";
4
5export const BackgroundsStellarGlowComponent108d6b53 = ({ children, className }) => {
6  const x = useMotionValue(0);
7  const y = useMotionValue(0);
8  const rotateX = useTransform(y, [-100, 100], [10, -10]);
9  const rotateY = useTransform(x, [-100, 100], [-10, 10]);
10  const springX = useSpring(rotateX, { damping: 20 });
11  const springY = useSpring(rotateY, { damping: 20 });
12
13  return (
14    <motion.div
15      onMouseMove={(e) => {
16        const rect = e.currentTarget.getBoundingClientRect();
17        x.set(e.clientX - rect.left - rect.width / 2);
18        y.set(e.clientY - rect.top - rect.height / 2);
19      }}
20      onMouseLeave={() => { x.set(0); y.set(0); }}
21      style={{ rotateX: springX, rotateY: springY, transformPerspective: 1000 }}
22      className={className}
23    >
24      {children}
25    </motion.div>
26  );
27};

Advanced Configuration

@aceternity/backgrounds-stellar-glow-component-10-8d6b53-advanced-demo
Advanced Configuration
tsx 
1"use client";
2import React from "react";
3import { motion, useMotionValue, useTransform, useSpring } from "framer-motion";
4
5export const BackgroundsStellarGlowComponent108d6b53 = ({ children, className }) => {
6  const x = useMotionValue(0);
7  const y = useMotionValue(0);
8  const rotateX = useTransform(y, [-100, 100], [10, -10]);
9  const rotateY = useTransform(x, [-100, 100], [-10, 10]);
10  const springX = useSpring(rotateX, { damping: 20 });
11  const springY = useSpring(rotateY, { damping: 20 });
12
13  return (
14    <motion.div
15      onMouseMove={(e) => {
16        const rect = e.currentTarget.getBoundingClientRect();
17        x.set(e.clientX - rect.left - rect.width / 2);
18        y.set(e.clientY - rect.top - rect.height / 2);
19      }}
20      onMouseLeave={() => { x.set(0); y.set(0); }}
21      style={{ rotateX: springX, rotateY: springY, transformPerspective: 1000 }}
22      className={className}
23    >
24      {children}
25    </motion.div>
26  );
27};

Props

Prop Type Default Description Required
className string "" Additional CSS classes No
children React.ReactNode - Child elements Yes
onClick () => void - Click handler No
color string "#a855f7" Primary color No

相关组件

Tilt Hover Effect – Aceternity UI 组件

Tilt Hover Effect – Aceternity UI 组件
Violet Pulse Component 88 – Aceternity UI 背景特效 组件

Violet Pulse Component 88 – Aceternity UI 背景特效 组件
Frost Pulse Component 67 – Aceternity UI 卡片容器 组件

Frost Pulse Component 67 – Aceternity UI 卡片容器 组件
Staggered Grid – Aceternity UI 组件

Staggered Grid – Aceternity UI 组件