Music / Bold

Onda.

A sculptural speaker hero with a responsive ring field, sound profiles, an interactive cutoff filter and optional synthesised audio.

An independent studio concept.

01 / THE DESIGN BRIEF

Build the idea.

Visual direction for the composition, typography, colour palette and interactions.

Build a fullscreen interactive hero for Onda, a sculptural speaker concept for listeners who care about sound and object design. Use an aubergine ground #2b1230, deeper shade #160818, warm light text #f6eef2, fine pink lines #e8a3b8 and coral #ff5a3c actions. Pair compressed Big Shoulders Display with Figtree. The Room profile is the initial palette; Stage and Night introduce coordinated alternate ground and accent colours. Place ONDA at the upper left, three small profile choices Room, Stage and Night at the top centre, and Menu at the upper right. Run the large uppercase headline Hear the whole room vertically along the left edge. Place short editorial copy and a Reserve yours action near the lower left, followed by a labelled filter cutoff slider and a small sound status line. Stand a tall sculptural speaker near the bottom right. Draw a curved dark shell, a subtle light slit, a circular driver and a play control centred on the driver. Fill the viewport with thin concentric irregular rings radiating from that same point. The rings should feel like sound made visible, with restrained seeded drift while idle and pointer ripples across the field. Audio starts only through an explicit press of the speaker control. Give playback a steady synthesised sound loop. Couple the ring response to the sound. Dragging across the field or moving the cutoff slider changes a lowpass filter and its visible readout. Profile selection retints the composition. The menu fans out radially from the driver rather than becoming a standard navigation bar. Below 760px recompose the speaker, headline and controls into a readable phone frame. Keep touch gestures usable and avoid accidental audio playback. Provide a static ring composition as the fallback and keep audio optional.

AI results vary by tool and model. This prompt may not produce an exact match to the preview.

02 / MAKE IT YOURS

Make it your own.

Editable HTML, CSS and JavaScript, required local artwork and fonts with their licences, a short README and usage terms. No framework or runtime build step. Preview and edit with a local server extension in your editor. Includes optional artwork generators. See the README for Node.js commands and any external inputs.

Downloads are free. Your Google account lets you download designs; browsing and copying prompts do not require an account.

Continue with Google, then return here to choose your download.

Personal and client use

You may use and modify this design for personal websites and commercial client websites. You may not resell, sublicense or redistribute the template, its source files or a collection containing it. Keep the included font licence notices. The design is supplied as a starting point without warranty.

Explore hero designs