Soren's banner
Soren's profile picture

Soren

@sorenblank • 6,843 subscribers

design eng

Shorts

`tabular-nums` should be the default for any number that updates ( timers, counters, prices, percentages, scores, live data etc ). you can enable this tnum OpenType feature using the CSS property `font-variant-numeric`. .tabular-nums { font-variant-numeric: tabular-nums; }

`tabular-nums` should be the default for any number that updates ( timers, counters, prices, percentages, scores, live data etc ). you can enable this tnum OpenType feature using the CSS property `font-variant-numeric`. .tabular-nums { font-variant-numeric: tabular-nums; }

1,181,914 views

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.

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.

1,029,256 views

for such case where the request is almost instant ( <100ms ), jumping directly to a `success state` is much more cleaner than adding artificial delay imo. imo loading states are generally ambiguous and means nothing without a proper `success state`.

for such case where the request is almost instant ( <100ms ), jumping directly to a `success state` is much more cleaner than adding artificial delay imo. imo loading states are generally ambiguous and means nothing without a proper `success state`.

888,077 views

"w/o prediction cone" VS "w/ prediction cone"

"w/o prediction cone" VS "w/ prediction cone"

433,153 views

made only using css. no js listener used. took me longer than i thought it would. for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover` so much you can do in css using pseudo classes. invest in css.

made only using css. no js listener used. took me longer than i thought it would. for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover` so much you can do in css using pseudo classes. invest in css.

425,266 views

do you click on `mailto` links? maybe some of you do. but i’ve seen many ( me included ) prefer to just copy the email address instead. this impl satisfies both groups: – click the email address for the `mailto` link – or click the icon to copy to clipboard

do you click on `mailto` links? maybe some of you do. but i’ve seen many ( me included ) prefer to just copy the email address instead. this impl satisfies both groups: – click the email address for the `mailto` link – or click the icon to copy to clipboard

125,364 views

here's how I optimized video assets on my site and improved perceived performance: - added a tiny ( ~30px wide ) `base64` encoded blurred inline image for each snippet, rendered as an underneath the video ( renders instantly! ) - moved all the videos to Cloudflare CDN. previously was using Next.js `/public` local path. which was fine when I had only 2-3 videos - added both `.webm` and `.mp4` formats via elements ( .mp4 as fallback in case browser doesn't support )

here's how I optimized video assets on my site and improved perceived performance: - added a tiny ( ~30px wide ) `base64` encoded blurred inline image for each snippet, rendered as an underneath the video ( renders instantly! ) - moved all the videos to Cloudflare CDN. previously was using Next.js `/public` local path. which was fine when I had only 2-3 videos - added both `.webm` and `.mp4` formats via elements ( .mp4 as fallback in case browser doesn't support )

70,490 views

ever seen these small dead zones in a list of closely stacked elements? im seeing this more often. this can be easily fixed using css `::before` pseudo element on each element: ::before { content: ""; position: absolute; inset: -10px 0; /* extends 10px vertically */ }

ever seen these small dead zones in a list of closely stacked elements? im seeing this more often. this can be easily fixed using css `::before` pseudo element on each element: ::before { content: ""; position: absolute; inset: -10px 0; /* extends 10px vertically */ }

62,706 views

Videos

LIVE
1.2k

Anya Rossi

sweetdream.ai

SweetDream.aiSponsored•Livecam
Streaming Now

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

HD live stream
Exclusive private shows
1.2k viewers online

Free preview available • Premium content

in this effect, im using `PointerEvent` to get the cursor position. then calculating a progress value (0 to 1) based on where your cursor is relative to the book's spine. each page then uses `calc()` to multiply its target rotation by the progress.
0:20
sorenblank's profile picture

in this effect, im using `PointerEvent` to get the cursor position. then calculating a progress value (0 to 1) based on where your cursor is relative to the book's spine. each page then uses `calc()` to multiply its target rotation by the progress.

Soren

266,372 views • 6 months ago

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.
0:34
sorenblank's profile picture

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.

Soren

183,803 views • 7 months ago

been thinking of making this since i saw Seb Cornelius's post. the static hover book is a pure css approach. no javascript used here. each page has a fixed rotation defined to it. pages are stacked with absolute positioning and all rotate from `origin-left` (the spine).
0:35
sorenblank's profile picture

been thinking of making this since i saw Seb Cornelius's post. the static hover book is a pure css approach. no javascript used here. each page has a fixed rotation defined to it. pages are stacked with absolute positioning and all rotate from `origin-left` (the spine).

Soren

142,940 views • 6 months ago

oh gosh im so dumb! thanks jhey ʕ•ᴥ•ʔ! this is better ngl. in my prev impl i was trying to make the effect using css `translate-z` to create depth, perspective on container, and varied circle sizes. in this implementation, it uses 2D X/Y translation only. no Z-axis for the rings.
0:32
sorenblank's profile picture

oh gosh im so dumb! thanks jhey ʕ•ᴥ•ʔ! this is better ngl. in my prev impl i was trying to make the effect using css `translate-z` to create depth, perspective on container, and varied circle sizes. in this implementation, it uses 2D X/Y translation only. no Z-axis for the rings.

Soren

143,320 views • 6 months ago

the sidebar icon now matches the state or the state it will go to. thanks jhey ʕ•ᴥ•ʔ :3
0:20
sorenblank's profile picture

the sidebar icon now matches the state or the state it will go to. thanks jhey ʕ•ᴥ•ʔ :3

Soren

133,722 views • 7 months ago

squircles feels nice. it's my first time trying the experimental css `corner-shape` property. you can just use in css `corner-shape: squircle` to make the squircles. had enough fun working on this control panel component. note: this is only support on "chromium" for now.
0:29
sorenblank's profile picture

squircles feels nice. it's my first time trying the experimental css `corner-shape` property. you can just use in css `corner-shape: squircle` to make the squircles. had enough fun working on this control panel component. note: this is only support on "chromium" for now.

Soren

76,361 views • 4 months ago

a smoother radius transform version using css. no framer motion used here. for auto height transition using css `grid` inspired by jhey ʕ•ᴥ•ʔ. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`. and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~
0:26
sorenblank's profile picture

a smoother radius transform version using css. no framer motion used here. for auto height transition using css `grid` inspired by jhey ʕ•ᴥ•ʔ. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`. and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~

Soren

104,532 views • 7 months ago

using `DeviceOrientationEvent`.
0:22
sorenblank's profile picture

using `DeviceOrientationEvent`.

Soren

55,833 views • 6 months ago

3d hover effect made only using css. no javascript or framer motion used here. im utilizing css `preserve-3d` transform-style. the parent tilts 55deg (X-axis) and spins -45deg (Z-axis). and on hover, im translating cards' Z 20px to have that elevation. with proper easing.
0:34
sorenblank's profile picture

3d hover effect made only using css. no javascript or framer motion used here. im utilizing css `preserve-3d` transform-style. the parent tilts 55deg (X-axis) and spins -45deg (Z-axis). and on hover, im translating cards' Z 20px to have that elevation. with proper easing.

Soren

21,757 views • 6 months ago

No more content to load