Dominik Bláha

really like this scrolltrack effect on the new @elevenlabs music site

CSS Tip 📖 Use CSS shape-outside to wrap text around shapes .column--left .shape { float: right; shape-outside: circle(100px at 100% 50%)); }

UI && CSS Tip! 🔥 You can create these dynamic glowing card effects with a single JavaScript event listener, some CSS tricks, and an HTML attribute 🤙 <article data-glow /> Here's how! 👇 You can use a combination of tricks from previous posts. Let's start with the JavaScript 📜 Use a function like this to send the pointer position via custom properties to the glows ✨ Attach this to the pointermove event 👆 const onPointermove = ({ x, y }) => { document​.documentElemen​t​.style.setProperty('--x', x) document.documentElement​.style.setProperty('--xp', x / innerWidth) document.documentElement​.style.setProperty('--y', y) document.documentElement​.style.setProperty('--yp', y / innerHeight) } Now for the styles 🎨 These custom properties define the border and spotlight size. The first trick is how you can change the color(--hue) based on the pointer position with calc 😎 [data-glow] { --border-size: 2px; --spotlight-size: 150px; --hue: calc(var(--base) + (var(--xp) * var(--spread))); } The magic is using the pointer position in a radial-gradient combined with background-attachment: fixed ✨ (Check the video for an exploding view 🎞️) [data-glow] { background-image: radial-gradient( var(--spotlight-size) var(--spotlight-size) at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px), hsl(var(--hue) 100% 70% / 0.25), transparent ); background-attachment: fixed; } The last major piece is using mask-composite on the pseudoelements of the [data-glow] element and the same background-attachment: fixed trick 🫶 [data-glow]::before, [data-glow]::after { pointer-events: none; content: ""; position: absolute; inset: calc(var(--border-size) * -1); border: var(--border-size) solid transparent; background-attachment: fixed; background-size: calc(100% + (2 * var(--border-size))); background-position: 50% 50%; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); mask-clip: padding-box, border-box; mask-composite: intersect; } This masks the elements so only a fake border is shown. That border is actually the spotlight background that moves around 👀 But now it's clipped to the border width 😎 Then it's a case of switching out the background-image for each pseudoelement based on purpose 🧐 For example, to get the white light, use your custom properties, make the light a little smaller and the color bright! [data-glow]::after { background-image: radial-gradient( calc(var(--spotlight-size) * 0.5) calc(var(--spotlight-size) * 0.5) at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px), hsl(0 100% 100% / 1), transparent ); } These are the major pieces you need to get it done. Extras? Want the outer glow? Nest a glow! <article data-glow> <span data-glow /> </article> Give the inner glow a blur to create the outer glow 😅 [data-glow] > [data-glow] { filter: blur(10px); } It's worth digging in with this one. Have a play around with the demo and the custom properties. The code isn't perfect after introducing all the configuration pieces 😅 Will put together a reduced example for you! 🙏 Any questions, let me know! 💙 @CodePen link below! 👇