# Particle Website & Hero Examples — Preview and Copy Prompts | Creght

> Explore stellar spirals, galaxies, text and image particles, and a butterfly hero. Open interactive previews, copy prompts, and build a website in Creght.

[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)

[CREGHT / RESOURCE LIBRARY](/en/effects.md)

# Your website.Starts with particles.

Particle effects · Interactive backgrounds · Heroes

Find an effect you love. Make it your website.

[Build a website](https://creght.cn/ai?utm_source=resource_library&utm_medium=website&utm_campaign=particle&utm_content=hero) [Explore particles](#particle-gallery)

Copy the prompt. Keep making it yours.

![](https://fsu.creght.com/site/2066727200882692096/1788856431173__stellar_spiral_cover.png?w=3072&fmt=webp)

Stellar Spiral · Reduced motion is on

Resume

[Keep exploring particle effects](#particle-gallery)

THE COLLECTION

## Particle effects & heroes06

AllStars & galaxiesText & imagesHero blocks

6 resources found

[![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.

[![Static cover of the Image Particles particle canvas](https://fsu.creght.com/site/2066727200882692096/1788856511008__image_particles_cover.png?w=3072&fmt=webp)Preview effect](/en/effects/particle/image-particles.md)

### [Image Particles](/en/effects/particle/image-particles.md)

Effect

Sample an icon or silhouette into particles for an expressive brand reveal.

[![Interactive Particle Canvas preview cover](https://fsu.creght.com/site/2066727200882692096/1785750913357__compressed_image_3041.jpg?w=3072&fmt=webp)Preview effect](/en/effects/particle/effects-particle.md)

### [Interactive Particle Canvas](/en/effects/particle/effects-particle.md)

Effect

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

[![Butterfly Particle Hero preview cover](https://fsu.creght.com/_assets/site/2064188570427461632/1782288491975__hero_02.png?w=3072&fmt=webp)Preview effect](/en/effects/particle/hero-02.md)

### [Butterfly Particle Hero](/en/effects/particle/hero-02.md)

Page block

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

FROM EFFECT TO WEBSITE

## An effect is just the beginning.

Set the first impression, then add your product story, proof and a clear next step.

01

### Find your starting point

Open a cover to try the real effect. Galaxies suit technology products, particle text suits launches, and a hero block provides a complete opening section.

02

### Copy a prompt. Make it yours.

Copy the resource prompt and add your brand, colors, copy and goal. Native effects and external blocks clearly explain their different reuse options.

03

### Build the rest of the website

Paste into Creght AI, then add navigation, features, proof and a call to action. Check the mobile experience, publish and connect your domain.

GOOD TO KNOW

## Good motion. In the right place.

Keep your content readable and your actions usable. Then choose the right particle density, speed and placement.

[Browse full website templates](/en/templates.md)

Are these particle website templates or standalone effects?+

This first collection contains standalone effects and one hero block, not six full website templates. Use them in a particle landing page, product site or portfolio. Full templates will be labeled separately.

Will particles slow down my website?+

Live particles need graphics processing. This collection loads static covers first and creates only the selected preview after a click. Mobile devices use fewer particles, and hidden or closed previews pause or unmount. Test performance on your finished website separately.

Can I change colors, text and animation speed?+

The four native previews support color, speed, size and glow. Text particles also support custom text. External blocks keep their original demos and controls. The default image silhouette is managed in the CMS.

Will copying a prompt reproduce the exact effect?+

Native-effect prompts describe the composition, parameters and implementation requirements; they are not source-code imports. AI results may vary. Existing Blocks resources include their actual selection references. Keep refining and verify the final result before publishing.

## From a single particle to your entire website.

Bring your product, brand and idea. Build a website you can keep editing and publish with Creght AI.

[Build a website](https://creght.cn/ai)

![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)