# Image Particles Website Effect — Preview & Prompt | Creght

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

[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)/Image Particles

Effect / PARTICLE

# Image Particles

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

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

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

Play animation

Preview settings

PauseReset

Speed1.0Particle size1.3Glow0.8Color

Changes apply to this preview only. Mobile devices use fewer particles.

## 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=image-particles)

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

## From silhouette to starlight

The demo samples a public star-shaped icon into particles while preserving its colors. Simple logos, product symbols and high-contrast silhouettes work best; detailed photographs may be harder to recognize.

## Prepare your image

Choose a clear silhouette on a transparent background. The CMS sample must allow cross-origin sampling. Upload assets you have permission to use and avoid inaccessible third-party URLs.

## Performance and fallback

Sampling starts after the detail preview loads. A static cover remains available if the image cannot be read or WebGL is unavailable, while text and CTAs stay usable.

## Your website starting point

```
Create a particle hero for a product website using the Image Particles concept. Use a #03090e background with #a9dbff blue and #ffa66b amber, mode image, about 12000 particles, speed 1, size 1.3 and glow 0.8. Sample the CORS-enabled image at https://fsu.creght.com/site/2066727200882692096/1788850063911__particle_sample.svg and retain its colors. Add a real HTML headline, value proposition and CTA outside the canvas, then navigation, features, proof and contact sections. Reduce density on mobile. Support reduced motion, manual pause, offscreen suspension and a static WebGL fallback. This is a requirements prompt, not a source-code import; refine the generated result.
```

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)