# Interactive Particle Canvas — Preview & Reuse | Creght

> An interactive particle canvas for heroes or backgrounds, with a Creght Blocks selection reference.

[Skip to content](#particle-main)

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

Products

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

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

Capabilities

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

Solutions

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

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

[Resources](/en/resources.md)

Creght AI·Website Resources

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

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

[Contact Us](/en/contact.md)

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

[Effects](/en/effects.md)/ [Particle effects & heroes](/en/effects/particle.md)/Interactive Particle Canvas

Effect / PARTICLE

# Interactive Particle Canvas

An interactive particle canvas for heroes or backgrounds, with a Creght Blocks selection reference.

![Interactive Particle Canvas preview cover](https://fsu.creght.com/site/2066727200882692096/1785750913357__compressed_image_3041.jpg?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=particle)

## 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.cn/ai?utm_source=resource_library&utm_medium=website&utm_campaign=particle&utm_content=effects-particle)

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

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

## About this resource

## Interactive Particle Canvas

An interactive particle canvas for heroes or backgrounds, with a Creght Blocks selection reference.

## 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 standalone effect. Combine it with HTML copy, navigation and a CTA. 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/effects/particle/particle.tsx
- Component chain (inner to outer): /tpl/p35l7ulpwviq/components/sections/effects/particle/particle.tsx
- Files actually used to render this selection (including implicit dependencies; read as needed):
  - /tpl/p35l7ulpwviq/components/sections/effects/particle/particle.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: react, three
```

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

## Keep exploring

[View all →](/en/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](/en/effects/particle/stellar-spiral.md)

### [Stellar Spiral](/en/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](/en/effects/particle/galaxy.md)

### [Spiral Galaxy](/en/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](/en/effects/particle/text-particles.md)

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

Effect

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

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

This website is built with [Creght](/en.md)

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

WeChat Support

## Links

- [SaaS Website Builder](/en/saas-website-builder.md)
- [Pricing](/en/price.md)
- [Solutions](/en/solution.md)
- [Customers](/en/customers.md)
- [AI Model Comparison](/en/ai-models.md)
- [Help Center](/en/help.md)
- [Contact Us](/en/contact.md)
- [Update Logs & Blogs](/en/blogs.md)
- [Refund Policy](/en/tuikuan.md)

## Resources

- [All Resources](/en/resources.md)
- [Templates](/en/templates.md)
- [Components](https://creghtlib.site.creght.com)
- [Animations](/en/design/effects.md)
- [Figma to Creght](/en/figma2creght.md)
- [API for AI](/en/api.md)

## Comparisons

- [vs Shianxianle](/en/creght-vs-sxl.md)
- [vs Fanke](/en/creght-vs-fkw.md)
- [Self-coding vs Creght](/en/compare/self-coding.md)
- [Outsourcing vs DIY](/en/compare/outsourcing.md)

## Terms

- [Terms of Service](/en/legal/terms.md)
- [Privacy Policy](/en/legal/privacy.md)
- [Acceptable Use Policy](/en/legal/acceptable-use.md)

## Social Media

- [Xiaohongshu](https://www.xiaohongshu.com/user/profile/5a38606811be10715f4895b6)
- [Bilibili](https://space.bilibili.com/513308095)

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

Free project assessment

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