About Listen Out Loud
Excited to share the recent launch of Listen Out Loud Media website, now live at listenoutloud.org.
This was a meaningful build. Listen Out Loud is a registered 501(c)(3) nonprofit that funds documentary films, classroom speakers, and media experiences for schools that can't afford them. The whole mission is around access, making sure every student gets to hear a story that sounds like theirs.
The donate section background animation started in Figma. I used Figma's motion tools to prototype the sine wave look and feel, iterating on the wave shapes, layering, and glow nodes until it felt right. Once the visual direction was locked, I used that Figma frame as the reference to rebuild it as a custom Framer code component with Claude.
The final component renders animated sine waves in SVG using cubic bezier paths and runs per-wave node passes on a random start and stop 60-second loop. This creates a unique path for the nodes so they are never the same as the previous loop. Fully prop-controlled with Framer's property controls API, wave count, amplitude, color, speed, and glow intensity all editable directly in the canvas.
