跳到主要內容

3D and Three.js prompt

With a plan

Murmur Particle Field Hero

A cinematic full-viewport hero over 52,000 GPU particles that breathe between a ribbon and a sphere, with depth of field, bokeh, additive glow, a hot core thread, film grain and a lens reticle. Three.js, dark and light.

  • Dark
  • Bold
  • Cl
  • Cu
  • v0
  • Lo
  • Bo
Murmur Particle Field Hero section, light theme

A picture of the design. The live, interactive preview, the full prompt and the code unlock with a Dapols plan. See the plans.

Want this on your own site? Pick it for your plan.

The prompt, code and settings

Everything on this page except these four tabs is free to read. The tabs unlock with a paid Dapols plan.

Murmur Particle Field Hero is included with every Dapols plan

Free visitors get the free prompts. Any Dapols plan, the one-time setup or the monthly subscription, unlocks every prompt.

Unlocking this prompt gives you:

  • The full prompt, ready to paste
  • Short notes for each AI tool it supports
  • The design as React with Tailwind, and as plain HTML and CSS
  • Every color, font and spacing value in a table
  • Step-by-step tips for using it in each tool

Already have a paid plan?

Not on a plan yet?

The preview, description and FAQ on this page are free. A plan unlocks this prompt and every other one in the library.

See the plans

Want to try one now? Browse the free prompts.

About this design

Murmur is a hero section whose backdrop is alive. Tens of thousands of tiny points drift as one body, curling through a flow field computed entirely on the graphics card, and every twenty-odd seconds the whole cloud breathes from a wide undulating ribbon into a loose sphere and back, each particle leaving at its own moment so the change rolls through the crowd like a wave. Move the pointer and the field leans toward you and parts around the cursor with a soft ripple that glints in one accent colour. The look is cinematic: a depth-of-field pass swells and softens distant points, a few become lens-style bokeh discs, soft halos add glow, and a hot thread runs down the middle of the ribbon, all graded over a dark olive backdrop with film grain and a faint lens reticle. The palette stays narrow, warm off-white points with chartreuse and a rare apricot core, and a light theme turns the same scene into ink dust and green bokeh on paper. It suits studios, launches and product pages that want a first screen people remember, and it is built to be responsible: one draw call, pixel ratio capped, rendering paused when offscreen, a still frame for reduced motion and a designed poster when WebGL is missing.

Pairs well with the Foundry and Atelier Looks in the Dapols website studio. See website examples.

Questions about this design

Does a particle hero slow the page down?

Not much, because the positions are computed on the graphics card in one draw call. This one caps the pixel ratio, uses half the particles on small screens, and stops rendering when the section is offscreen or the tab is hidden.

What happens without WebGL or with reduced motion?

Without WebGL a dotted SVG poster of the ribbon is shown, so the section still looks designed. With reduced motion the scene draws one composed frame and stops, and the pause button is hidden.

Can I change the colors or shapes?

Yes. The colors, including the hot core and the blend mode, come from CSS variables read into uniforms, so a theme toggle works. The shapes are two small functions in the vertex shader; swap them for any parametric surface.

  • Facet Scroll Product Showcase preview

    3D and Three.jsWith a plan

    Facet Scroll Product Showcase

    A four-chapter product page with one sticky canvas: a procedural gem in transmissive, dispersive glass lit by a baked studio, on a lit sweep with a rim glow, while the camera dollies along a spline and the finish changes as you scroll. Three.js, no HDR files.

    • Bold
    • Minimal
    • Cl
    • Cu
    • v0
    • Lo
    • Bo
    View
  • Isoline Waves Background preview

    3D and Three.jsWith a plan

    Isoline Waves Background

    A drop-in animated background: one full-screen shader plane drawing luminous contour lines with relief tints, a key light and depth fog, four CSS-driven colours, a pointer bend and a refined glass card on top.

    • Dark
    • Glass
    • Cl
    • Cu
    • v0
    • Lo
    • Bo
    View
  • HeroFree

    Aurora Glass Hero

    A night-sky hero lit by real aurora curtains of mint, lime and cyan rays, with the headline held in a frosted-glass card with a specular rim, fine grain and floating glass tiles. Includes a pale-fog light theme with the same hues.

    • Dark
    • Glass
    • Cl
    • Cu
    • v0
    • Lo
    • Bo
    • GP
    View and copy

Use this in your own site

Need a whole site, not one section? Pick the designs you like, choose your colors and fonts, and Dapols builds the website for you as part of your plan. Answer a few questions about your business to get started.