# Butterfly Particle Hero — Preview & Reuse | Creght

> A butterfly-particle hero composition for technology brands and visual storytelling.

[Skip to content](#particle-main)

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

Products

[AI Website BuilderRecommendedBuild websites and web apps through conversation](/ai.md) [Visual Website BuilderBuild precisely with a canvas, components, and effects](/design.md)

[Compare BothChoose the right creation method for your needs](/ai-vs-visual-builder.md)

Capabilities

[AI generation](/ai.md) [Visual editing](/features/visual-editing.md) [Backend](/features/backend.md) [Publishing & hosting](/features/publishing.md) [SEO, GEO & analytics](/features/analytics.md) [Creght CLI](/features/cli.md) [All capabilities](/features.md)

Solutions

[SaaS Website Builder](/saas-website-builder.md) [Designer Portfolio](/solution/designer-portfolio.md) [Foreign Trade Website](/solution/foreign-trade-website.md)

[Pricing](/price.md) [Help Center](/help.md)

[Resources](/resources.md)

Creght AI·Website Resources

[Website TemplatesStart from a complete website](/templates.md) [Page SectionsHero, pricing, case studies, and more](/blocks.md) [Motion InspirationDiscover reusable interaction effects](/effects.md)

[Browse all resources](/resources.md) [Visual Builder Resources](/design/resources.md)

[Contact Us](/contact.md)

[Get Started](https://creght.com/project)

[Effects](/effects.md)/ [Particle effects & heroes](/effects/particle.md)/Butterfly Particle Hero

Page block / PARTICLE

# Butterfly Particle Hero

A butterfly-particle hero composition for technology brands and visual storytelling.

![Butterfly Particle Hero preview cover](https://fsu.creght.com/_assets/site/2064188570427461632/1782288491975__hero_02.png?w=3072&fmt=webp)

Static preview is active. You can choose to enable motion.

Play animation

Loading external demo. You can also open it in a new window.

[Open original demo ↗](https://blocks.creght.com/preview?section=hero-02)

## Make this effect yours

Copy the prompt and describe your brand, content and placement in Creght AI. This resource is a starting point for a complete website.

Copy prompt [Build a website](https://creght.com/ai?utm_source=resource_library&utm_medium=website&utm_campaign=particle&utm_content=hero-02)

Copy first, then paste into Creght AI and describe where the effect should go.

[← Back to particle resources](/effects/particle.md)

## About this resource

## Butterfly Particle Hero

A butterfly-particle hero composition for technology brands and visual storytelling.

## How to use it

Open the original demo and inspect its interaction. Copy the selection reference into Creght AI and describe your brand, copy and placement so AI can read and adapt the referenced block.

## Resource boundaries

This is a reusable hero block, not a complete website template. The external demo does not use native preview controls. Open the original in a new window if embedding is unavailable, and check mobile, reduced motion and text contrast before publishing.

## Your website starting point

```
# 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
```

You can select and copy this prompt manually. Temporary preview settings do not automatically update the prompt.

## Keep exploring

[View all →](/effects/particle.md)

[![Static cover of the Stellar Spiral particle canvas](https://fsu.creght.com/site/2066727200882692096/1788856431173__stellar_spiral_cover.png?w=3072&fmt=webp)Preview effect](/effects/particle/stellar-spiral.md)

### [Stellar Spiral](/effects/particle/stellar-spiral.md)

Effect

Blue and amber starlight follows spiral arms, adding depth to AI and technology websites.

[![Static cover of the Spiral Galaxy particle canvas](https://fsu.creght.com/site/2066727200882692096/1788856448263__galaxy_cover.png?w=3072&fmt=webp)Preview effect](/effects/particle/galaxy.md)

### [Spiral Galaxy](/effects/particle/galaxy.md)

Effect

A tilted galaxy disk with flowing starlight, made for immersive product launches.

[![Static cover of the Text Particles particle canvas](https://fsu.creght.com/site/2066727200882692096/1788856471911__text_particles_cover.png?w=3072&fmt=webp)Preview effect](/effects/particle/text-particles.md)

### [Text Particles](/effects/particle/text-particles.md)

Effect

Turn a brand name or short statement into glowing particles for launches and creative portfolios.

> Full page index: [/llms.txt](/llms.txt)