Matheus

Art: @assisthreedee - He/Him - JS + TS | React | Node | C# developer

[Matheus @assisrMatheus]

@mweinbach @DicksonPau Where?

[Voicu Apostol @cerpow]

I built a smooth progressive blur generator for the web.

Super fun to build. 🫆

[Soren @sorenblank]

prediction cone/safe triangle — this is something we take so much for granted in modern day native UIs.

but it's not the same for most web-based dropdown menus. it took me a while to implement this here.

Amazon, macOS, Windows all implement some version of this.

[Matheus @assisrMatheus]

@bandascalene @CaligrafoTV

[FifthTee55 (COMS CLOSED) @Fifthtee55]

I have been cooking👀
Coms for @/not_an_bot

#pixelart #Commission #animation

[Matheus @assisrMatheus]

Contrast much? @LeetCode

(To be fair, i'm using 5120x1440)

[Matheus @assisrMatheus]

@NuraPixel muuuch more

[Matheus @assisrMatheus]

@lucasinutilismo Queria no bandcamp pra comprar, kd

[priya @priyaality]

accidentally discovered the website for Departure Mono, made by the makers of Phosphor Icons. what a beauty🧡

[jhey ʕ•ᴥ•ʔ @jh3yy]

dropdown menus w/ CSS anchor positioning 👨‍🍳

button { anchor-name: --m; }
[popover].menu {
position-anchor: --m;
top: anchor(bottom);
right: anchor(right);
position-try-fallbacks: flip-block, flip-inline;
}

dropdown stays in view, anchors to the button!

[jhey ʕ•ᴥ•ʔ @jh3yy]

pointermove + document.elementFromPoint(x, y) to make this CSS cursor trail work on touch device 🧑‍🍳

grid.addEventListener('pointermove', ({ x, y }) => {
document.elementFromPoint(x, y).dataset.hover = 'true'
})
[data-hover] { rotate: calc(var(--r) * 90deg); /* etc. */ }

[jhey ʕ•ᴥ•ʔ @jh3yy]

when the tool is missing, make it 👨‍🍳

motion path visualizer w/ SVG for accumulated cubic-bezier timed CSS animations ⚡

[jhey ʕ•ᴥ•ʔ @jh3yy]

details 🤌

:hover intention + safety triangles 🦺

.triangle { pointer-events: none; }
.toggle:hover .triangle { pointer-events: all; }
.toggle:has(+ :popover-open) .triangle { scale: 0; }
.toggle:is(:hover, :focus-visible) + aside {
translate: 0 0;
}

[jhey ʕ•ᴥ•ʔ @jh3yy]

5 min cursor trails with grid + CSS custom properties 💫

<div style="--o: 0.2; --r: 3">
.grid div {
opacity: var(--o);
transition: opacity 0.8s, rotate 0.4s;
&:hover {
transition-duration: 0s;
rotate: calc(var(--r, 0) * 90deg);
opacity: 1;
}}

trick: dynamic :hover transition

[jhey ʕ•ᴥ•ʔ @jh3yy]

dot matrix display w/ CSS mix-blend-mode, filters, and mask 👨‍🍳

[hard to screencast or catch on camera]

[jhey ʕ•ᴥ•ʔ @jh3yy]

Love riffin' on stuff like this 🤙

– 1 element
– 2 CSS background-images
– 1 background-blend-mode
– 1 filter
– &lt; 10 lines of JavaScript

Magic! 🪄

[jhey ʕ•ᴥ•ʔ @jh3yy]

Using the CSS Custom Highlight API to create dynamic typing animations ✨

No need to update or change the DOM content 👀

The content is always there, you're jus' highlighting it to create the effect!

[jhey ʕ•ᴥ•ʔ @jh3yy]

CSS card parallax with pointermove + custom props 🧑‍🍳

&lt;div class=ring style="--i: 2"&gt;
.ring {
translate: calc(var(--px) * (var(--i) * -2rem))
calc(var(--py) * (var(--i) * 2rem));
}

trick: pointer mapping to rotate card in 3D + translate rings 2D for the illusion 🤙

check it 👇

[jhey ʕ•ᴥ•ʔ @jh3yy]

context-aware css card glow/shine effect 👨‍🍳

the trick: duplicate and scale the icon. translate it on pointermove. apply feGaussianBlur 🤙

check it 👇

[Design Community @designcmmnty]

Context-aware css card glow/shine effect⚡️ By @jh3yy