Discover the best sound websites created by professional designers. Get inspired and start planning your perfect sound web design today!

Click anywhere on the page for sound when scrolling

Portfolio Lists

Recreation of the map found at  https://www.netflixshadowandbone.com/map

This cloneable is for learning purposes only. I do not own the rights to this design and content.

Draggable Map

A website for a health tech startup Sonde. Made this one to try ourselves in a biotech design style. We made this project cloneable, so you can check out how we done or reuse some cool effects with animation!

Sonde Health

A simple pad with sound effects for your Clubhouse rooms. It uses a lot of custom code, so make sure to inspect that stuff to create your own :)

Clubhouse Soundboard

Clubpad - Clubhouse Soundboard

Based on Curtains.js. Fully customizable in size and shape, responsive (behaves like css cover). Options for autoplay or buttons, transition duration, custom displacement maps or pixel distance, built in easings (no libs). Will add more shaders soon (hopefully).

CHANGELOG
Version1: fixed last image not displaying.

glflow

Webgl Image Transition Slider ⟋ webgl

Hey! 🙌 Thanks for landing on this microsite. 🌎 Checkout this cool teleprompter tool 💻 you can use! 🤩 Feel Free 🤝 to edit this text to whatever you'd like and you can send this link out 🔗 to present your writing. 📝 So go ahead and give it a try, 💪 and see how it can help you present your work to the world! 🌍
(credits to @pablostanley for building awesome creative commons code)

Teleprompter (write your own content) | Microsite | Assulin

telep-microsite-assulin

ThreeSixtyEight

We hijacked our Monday all-hands meeting to reveal the location of our 2021 company retreat. Every team member had to complete an interactive Webflow puzzle to unlock the location - and now we want to share that experience with you.

Complete the experience by Friday, 9/24 for a chance to join a Q&A with the design team who created it. Winners will be notified the week of October 6.

ThreeSixtyEight Retreat

Light The Fire Within Us

Howler.js Audio

A new logo, new image and new website for our little web design service. We went through several iterations for this finalized design. We came across a few obstacles along the way during the design and development process which resulting in removing a lot of ideas implemented. The major issue with the fallback is performance drop caused by complex interactions, hidden heavy content elements, overlapping bugs, etc.

Eventhough the end result is not as expected, but it came out fine. (Well, at least it works.) Also, along the process, we discovered several bugs, do's and dont's, the possibilities, and new ideas. It has been fun creating this site.

If anyone has feedback or inquiry, feel free to drop me a message. =)

Lastly, have fun building websites.

SketchzLab

SketchzLab Official Site - Renewal

@memory-work (http://memory-work.com/) launched a speculative scenario-fiction project called Memory Work an immersive audio experience exploring the futures of women’s labour and economic transformation through prisms of class, gender, immigration, status and race. Listen to the soundscape on the website.

Memory Work

Needed sound, made sound (module).
Configurable to play on hover or click.


Might add stuffs to it,  just comment if you need anything. Not particularly elegant but 🤷.

Random sounds from soundly.

👀

CHANGELOG
06/04/22 ‖ If first click is on a trigger sound plays directly instead of separating the Audio Context creation from the triggering. Never written something less clear in my life I think :)

How to.
Please host the code yourself if used in production as stuffs might break or I might make weird changes. If you follow the link provided in the page code you'll find yourself in a codesandbox, where there will be a .js.txt file. Download that, put it in wf, get the link and link that as a script. Thanks!

sound-module

Sound Module ⟋ js

Jesus Jam

JesusJam

The menu from minmum.studio is super fun so I decided to recreate something similar in Webflow. To create the sound effect I used the same technique used on my previous clonable https://www.webflowtips.com/b/how-to-add-audio-sounds-to-buttons

All the other animations are done entirely in Webflow.  

Two important things:

1. Make sure you publish the project for the sound to work.
2. Remember to host the audio file in your own server. The file used in the clonable will be removed, so if you use it for your own project it probably won’t work :(

Sign up for the lesson: http://www.webflowtips.com/b/how-to-animate-a-menu-button-with-sound-effect

If you have any questions feel free to comment.

P.S Like or follow if this was useful for you 🙂 🙌

Menu with sound effect / audio

 Menu with Sound Effect

I have seen many projects lately which add sound effects to buttons so I wanted to share how to do it.

Each of the sounds needs their own code. You can find the code in each embed.

To add them to your project:

1. Add a class to the div where you want the sound to play when clicked.
2. Add an embed and paste the code in your project.
3. Change the code to match your class name and the mp3 address where you hosted your audio file.

****Important****

- Do not link to the audio files on the clonable. Make sure to host the audio file in your server. These files will be removed and they won’t work in the near future.
- You need to publish the project to hear the sounds

Sounds by:

soundbible.com
Mixit.co

Sign up for the lesson: www.webflowtips.com/b/how-to-add-audio-sounds-to-buttons

If you have any questions feel free to comment.

P.S Like or follow if this was useful for you 🙂 🙌

Buttons with sound

Buttons with Sounds / Audio

From warehouses, clubs, pubs and bars to The Island, Town Hall and the Sydney Opera House, Picnic has made its mark in every corner of Sydney's underground nightlife. The many-pronged events, touring, curation and consulting company is positioned right on the cutting edge of dance music in the Harbour City, establishing itself as a leading force in the music scene for more than 12 years.

Picnic Stuff

Picnic Stuff - Events and Music

Granyon

A campaign that centers the voices of the men and women devastated by America’s 3 Strikes Drug Law.

The Third Strike Campaign

Digital Butlers

Welcome to Los Angeles Fairway Branch! 🥳

Hello there! Our team built this atmospheric and gamified branch / loan officer website template for one of the biggest mortgage companies in the US. There are a bunch of stuff that you can do there:

- Find your mortgage advisor
- Calculate your mortgage rate and download PDF report
- See your local area services
- Start your mortgage journey with the help of hybrid quiz
- Play with interactive LOTTIE animations
- Dynamic LO pages using Webflow CMS
And much more 🤘🏻🔥

We worked a few months on this project and will be very glad to know your feedback 🙏🏻

P.S. Can you find a "cat easter egg"? 😏 Turn on the sound and click on each cat that you will find 😜

Fairway Branch Website

I took part in the Webflow Party Challenge No.2. And had a blast creating this and sharing with everyone. But now back to Work! 

The goal:
Bring awareness to fans and spectators about the upcoming Grand Prix race in Monaco!

The audience:
Men and women between the ages of 25-55 who enjoy attending the Grand Prix and other F1 events.
They are knowledgeable about the industry and have travelled around the world to follow their favourite drivers.

The execution: Think about movement, power, and boldness. Embody the concept of speed and performance.

Check them out for the next awesome Challenge!
https://webflow-party.circle.so/c/the-party/challenge-2

Photos from petrolicous.com

Discover sound websites built by the Webflow community

Discover sound websites built by the Webflow community