Nice touch pulling in the waveform visualization , reminds me of how we handled a podcast site build. Curious if you’ve tried adding playback speed controls or scrub-to-section markers? Those tend to come up a lot with longer audio content.
Thank you for sharing this! This is awesome stuff!
I just watched the video and I think I have a solution for handling the colors with variables (I didn’t test it though, so its just a theoretical idea):
Add multiple Variable Modes (one for each color theme) and set the colors for each mode.
Go to the parent component of the audio player (in your case this would be either “Demo Section“ or “CSS isolator“) and create a component variant for each color theme.
Inside each component variant select the first HTML-element in the DOM-tree and set the corresponding Variable Mode in the style-panel (see screenshot below).
I like your thinking on variable modes especially, and I need to dig more into that aspect of code component design, but here’s my hot take-
Component themes are pretty straightforward, because you can store CSS directly in the component, switch it with variants, etc- but that’s still a limited set of styling options.
I generally dislike that as a limitation, because the point of Webflow is maximum designer control, and code components should be able to embrace that.
At this point the directions to experiment with are probably;
Offer a base light-mode / dark-mode theming for the component, and the ability to either pick one, or tie it into your site’s dark/light switching approach for manual for preferential switching. That’s the first part to work out.
Then leverage variables and variable modes hard, mostly for responsive styling on more complex components that need breakpoint-level styling.
I really like the idea of using variable modes, because ideally anything breakpoint-specific could be controlled there- even the masonry grid column count. And I’m unhappy with breakpoint-specific properties there, the property panel really isn’t designed for that.
Really good thinking on this- are you experimenting with CC’s at all? I’d be really interested in what approaches you find on the styling front.
Yea I see thats quite a big limitation. Do I see this correctly that when you import a CC (that uses some variables) to a WF-project you have to manually create all the corresponding variables in the Webflow variables panel with the correct variable names in order for them to work?
If it would automatically add all variables to the WF-variables panel that you use inside the CC it would make it a bit more flexible. You could define sizes, border-radius, colors, etc. with variables which gives you more control of the design after import.
But still, I see its a big limitation.
No I sadly don’t have the react-skills to experiment with CCs I’m just interested in bridging the gap between Webflow and other programming languages in order to create more complex websites.
Yes. Shared lib components are challenging as well- there you see the lib-stored vars, but you cannot change them. I expose docs so that it’s a simple copy-paste, and I’m campaigning for docs links to make that more accessible.
I know the team is working on exposing new styling features, a lot of work there- but I don’t know what form it will take. For my part I’d love to be able to expose a series of component-specific classes and vars from the components, and then when the component is selected, style those directly.
I think that could solve site-wide branding for 3rd party components, plus component instance styling when that one CTA needs to look different.
For now variable an inheritance are where it’s at, and you can achieve a lot there, just not in a user-friendly way, and not easily at the instance level.
I was just thinking about this topic yesterday and posted this on X. If you understand programming but are unfamiliar with React, you can cut that learning curve way down with a tool like claude code. We’re at a very impressive place in history.
I’m just interested in bridging the gap between Webflow and other programming languages in order to create more complex websites.