# 蝴蝶粒子 Hero｜互动预览与使用方式 - Creght

> 蝴蝶粒子与首屏布局组合，适合科技品牌和视觉叙事。

[跳到主要内容](#particle-main)

[![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)](/)

产品

[AI 建站推荐用对话生成网站与 Web 应用](/ai.md) [可视化建站用画布、组件和特效精细搭建](/design.md)

[两种方式对比根据需求选择合适的创作方式](/ai-vs-visual-builder.md)

核心能力

[AI 生成](/ai.md) [可视化编辑](/features/visual-editing.md) [后端能力](/features/backend.md) [发布与托管](/features/publishing.md) [SEO、GEO 与数据](/features/analytics.md) [Creght CLI](/features/cli.md) [全部能力](/features.md)

解决方案

[SaaS 官网生成器](/saas-website-builder.md) [设计师作品集](/solution/designer-portfolio.md) [外贸独立站](/solution/foreign-trade-website.md)

[价格](/price.md) [帮助中心](/help.md)

[资源广场](/resources.md)

Creght AI·建站资源

[网站模板从完整网站开始](/templates.md) [页面区块首屏、定价、案例等常用区块](/blocks.md) [动效灵感发现可复用的交互动效](/effects.md)

[浏览全部资源](/resources.md) [可视化建站资源](/design/resources.md)

[联系我们](/contact.md)

[立即体验](https://creght.cn/project)

[动效库](/effects.md)/ [粒子特效与 Hero](/effects/particle.md)/蝴蝶粒子 Hero

页面板块 / PARTICLE

# 蝴蝶粒子 Hero

蝴蝶粒子与首屏布局组合，适合科技品牌和视觉叙事。

![蝴蝶粒子 Hero效果封面](https://fsu.creght.com/_assets/site/2064188570427461632/1782288491975__hero_02.png?w=3072&fmt=webp)

当前使用静态预览。你可以自行开启动态效果。

播放动态效果

正在加载外部演示；也可以在新窗口打开。

[新窗口预览 ↗](https://blocks.creght.com/preview?section=hero-02)

## 把这个效果用起来

复制提示词，在 Creght AI 中描述你的品牌、内容和放置位置。这个资源可以作为完整网站的一部分。

复制 Prompt [免费生成网站](https://creght.cn/ai?utm_source=resource_library&utm_medium=website&utm_campaign=particle&utm_content=hero-02)

先复制，再粘贴到 Creght AI 对话中，描述你想放置的位置。

[← 返回粒子资源库](/effects/particle.md)

## 关于这个资源

## 蝴蝶粒子 Hero

蝴蝶粒子与首屏布局组合，适合科技品牌和视觉叙事。

## 如何使用

打开外部演示，检查实际交互。复制本页的原始选区引用到 Creght AI，描述品牌、文案与希望放置的位置，由 AI 读取相应板块并继续修改。

## 资源边界

这是一个可复用的 Hero 首屏板块，不是完整网站模板。 外部演示不使用本地参数面板；如嵌入受限，使用“新窗口预览”。发布前检查手机、减少动效与文字对比。

## 你的建站起点

```
# Talizen Template Selection Reference

This is a selected section from template site p35l7ulpwviq. Paths beginning with /tpl/ are in a read-only virtual directory.
Use the list_files / read_file / grep_file tools to read the template source as needed; the full source does not need to be included in this message.
Important: list_files or grep_file with path=/ does not include template files; this does not mean they are absent. To search this template, explicitly set path to /tpl/p35l7ulpwviq.

## Selected Element
- Source location: /tpl/p35l7ulpwviq/components/sections/hero/hero-02/hero-02.tsx
- Component chain (inner to outer): /tpl/p35l7ulpwviq/components/sections/hero/hero-02/hero-02.tsx
- Files actually used to render this selection (including implicit dependencies; read as needed):
  - /tpl/p35l7ulpwviq/components/sections/hero/hero-02/hero-02.tsx
  - /tpl/p35l7ulpwviq/talizen.config.ts
  - /tpl/p35l7ulpwviq/index.css
  - /tpl/p35l7ulpwviq/components/sections/effects/particle/ParticleCanvas.tsx
  - /tpl/p35l7ulpwviq/components/sections/effects/particle/shaders.ts
- Dependencies: lucide-react, react, three
```

提示词保留在页面中，可手动选择复制。预览中的临时调参不会自动改写这里的提示词。

## 继续探索

[查看全部 →](/effects/particle.md)

[![星际螺旋动态画布的静态封面](https://fsu.creght.com/site/2066727200882692096/1788856431173__stellar_spiral_cover.png?w=3072&fmt=webp)预览效果](/effects/particle/stellar-spiral.md)

### [星际螺旋](/effects/particle/stellar-spiral.md)

独立动效

蓝金色星光沿旋臂汇聚，为 AI 产品与科技官网建立空间感。

[![旋涡星系动态画布的静态封面](https://fsu.creght.com/site/2066727200882692096/1788856448263__galaxy_cover.png?w=3072&fmt=webp)预览效果](/effects/particle/galaxy.md)

### [旋涡星系](/effects/particle/galaxy.md)

独立动效

倾斜的星系盘与柔和流光，适合需要沉浸感的产品发布页。

[![文字粒子动态画布的静态封面](https://fsu.creght.com/site/2066727200882692096/1788856471911__text_particles_cover.png?w=3072&fmt=webp)预览效果](/effects/particle/text-particles.md)

### [文字粒子](/effects/particle/text-particles.md)

独立动效

把品牌名或一句宣言变成发光粒子，适合新品发布与创意作品集。

![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)

此网站使用 [Creght](/) 创建

![微信客服](https://fsu.creght.com/site/2066727200882692096/1785119134612__image.png?w=3072&fmt=webp)

微信客服

## 链接

- [SaaS 官网生成器](/saas-website-builder.md)
- [价格](/price.md)
- [解决方案](/solution.md)
- [客户案例](/customers.md)
- [AI 模型对比](/ai-models.md)
- [帮助中心](/help.md)
- [联系我们](/contact.md)
- [更新记录 & 博客](/blogs.md)
- [退款说明](/tuikuan.md)

## 资源

- [全部资源](/resources.md)
- [模板](/templates.md)
- [组件库](https://creghtlib.site.creght.com)
- [动效库](/design/effects.md)
- [Figma to Creght](/figma2creght.md)
- [API](/api.md)

## 产品对比

- [对比上线了](/creght-vs-sxl.md)
- [对比凡科建站](/creght-vs-fkw.md)
- [自己写代码 vs Creght](/compare/self-coding.md)
- [外包 vs 自己做](/compare/outsourcing.md)

## 协议

- [用户协议](/legal/terms.md)
- [隐私政策](/legal/privacy.md)
- [可接受使用政策](/legal/acceptable-use.md)

## 社交媒体

- [小红书](https://www.xiaohongshu.com/user/profile/5a38606811be10715f4895b6)
- [哔哩哔哩](https://space.bilibili.com/513308095)

[蜀ICP备2023038192号-2](https://beian.miit.gov.cn)

免费方案评估

> 全站页面清单：[/llms.txt](/llms.txt)