Bruno Stasse
@brunostasse.bsky.social
Creator of @silkhq.com • Making on the web what the web can't do • EU/France 🇪🇺 • silkhq.com
Pinned
Bruno Stasse
@brunostasse.bsky.social
· Mar 25
Introducing Silk — The most advanced swipeable sheet ever engineered for the web.
Native-like experience • Works on all devices • Unlocks dozens of UI patterns on the web.
Available for React.
Native-like experience • Works on all devices • Unlocks dozens of UI patterns on the web.
Available for React.
Page with background parallax.
120fps trackpad swipe animation. Animated header fade. Fully accessible.
On the web, with @silkhq.com
120fps trackpad swipe animation. Animated header fade. Fully accessible.
On the web, with @silkhq.com
July 8, 2025 at 1:57 PM
Page with background parallax.
120fps trackpad swipe animation. Animated header fade. Fully accessible.
On the web, with @silkhq.com
120fps trackpad swipe animation. Animated header fade. Fully accessible.
On the web, with @silkhq.com
Just added an `updateThemeColor()` function to @silkhq.com that lets you update the page `theme-color` used for the iOS status bar while preserving the dimming that makes it blend with the Sheet's Backdrop.
Pretty useful when you're switching between light/dark mode from within a Sheet!
Pretty useful when you're switching between light/dark mode from within a Sheet!
July 7, 2025 at 3:15 PM
Just added an `updateThemeColor()` function to @silkhq.com that lets you update the page `theme-color` used for the iOS status bar while preserving the dimming that makes it blend with the Sheet's Backdrop.
Pretty useful when you're switching between light/dark mode from within a Sheet!
Pretty useful when you're switching between light/dark mode from within a Sheet!
If you're doing cool stuff with @silkhq.com too, send it my way, I'd love to see it!
Tjek’s eTilbudsavis web app, home to digital catalogs from brands across Scandinavia, is now using @silkhq.com.
It looks great, check it out 👇
It looks great, check it out 👇
July 5, 2025 at 1:34 PM
If you're doing cool stuff with @silkhq.com too, send it my way, I'd love to see it!
This is what the mobile web should have felt like all along.
My goal is to make this the new normal.
My goal is to make this the new normal.
Tjek’s eTilbudsavis web app, home to digital catalogs from brands across Scandinavia, is now using @silkhq.com.
It looks great, check it out 👇
It looks great, check it out 👇
July 3, 2025 at 9:51 AM
This is what the mobile web should have felt like all along.
My goal is to make this the new normal.
My goal is to make this the new normal.
Tjek’s eTilbudsavis web app, home to digital catalogs from brands across Scandinavia, is now using @silkhq.com.
It looks great, check it out 👇
It looks great, check it out 👇
July 2, 2025 at 4:20 PM
Tjek’s eTilbudsavis web app, home to digital catalogs from brands across Scandinavia, is now using @silkhq.com.
It looks great, check it out 👇
It looks great, check it out 👇
Sometimes all you need is a clean, smoothly animated page.
120fps enter/exit animations. Inner scrolling with overshoot. Perfect body scroll locking. Fully accessible.
Made with @silkhq.com, on the web.
120fps enter/exit animations. Inner scrolling with overshoot. Perfect body scroll locking. Fully accessible.
Made with @silkhq.com, on the web.
July 1, 2025 at 2:10 PM
Sometimes all you need is a clean, smoothly animated page.
120fps enter/exit animations. Inner scrolling with overshoot. Perfect body scroll locking. Fully accessible.
Made with @silkhq.com, on the web.
120fps enter/exit animations. Inner scrolling with overshoot. Perfect body scroll locking. Fully accessible.
Made with @silkhq.com, on the web.
Rich in-editor hints for @silkhq.com just shipped!
You now get information about each component, sub-component and prop inline as you type. Learn what is required, what things do and how they compose together without leaving you editor.
You now get information about each component, sub-component and prop inline as you type. Learn what is required, what things do and how they compose together without leaving you editor.
June 30, 2025 at 1:29 PM
Rich in-editor hints for @silkhq.com just shipped!
You now get information about each component, sub-component and prop inline as you type. Learn what is required, what things do and how they compose together without leaving you editor.
You now get information about each component, sub-component and prop inline as you type. Learn what is required, what things do and how they compose together without leaving you editor.
Coming soon: Rich code editor hints for Silk ✨
You'll know which sub-components are required, how they compose together and what their props do without leaving your editor.
You'll know which sub-components are required, how they compose together and what their props do without leaving your editor.
June 20, 2025 at 12:19 PM
Coming soon: Rich code editor hints for Silk ✨
You'll know which sub-components are required, how they compose together and what their props do without leaving your editor.
You'll know which sub-components are required, how they compose together and what their props do without leaving your editor.
Long scrollable sheet. Swipe up or down to dismiss with your trackpad.
Made with Silk, on the web.
Made with Silk, on the web.
June 19, 2025 at 2:53 PM
Long scrollable sheet. Swipe up or down to dismiss with your trackpad.
Made with Silk, on the web.
Made with Silk, on the web.
Apple says the new iOS Safari is all about an immersive, edge-to-edge experience. But after testing it out, that promise doesn’t hold up.
In fact, beta 1 delivers the least immersive experience ever, unless you only visit websites from the ‘90s when `position: fixed` didn’t exist.
In fact, beta 1 delivers the least immersive experience ever, unless you only visit websites from the ‘90s when `position: fixed` didn’t exist.
June 13, 2025 at 1:32 PM
Apple says the new iOS Safari is all about an immersive, edge-to-edge experience. But after testing it out, that promise doesn’t hold up.
In fact, beta 1 delivers the least immersive experience ever, unless you only visit websites from the ‘90s when `position: fixed` didn’t exist.
In fact, beta 1 delivers the least immersive experience ever, unless you only visit websites from the ‘90s when `position: fixed` didn’t exist.
Sheet with transient detent. The intermediate detent is removed once the sheet reaches the last detent.
Swipe up or tap the input to expand. Scroll to dismiss the keyboard. Swipe down to dismiss the sheet.
Made with Silk, on the web.
Swipe up or tap the input to expand. Scroll to dismiss the keyboard. Swipe down to dismiss the sheet.
Made with Silk, on the web.
June 3, 2025 at 3:24 PM
Sheet with transient detent. The intermediate detent is removed once the sheet reaches the last detent.
Swipe up or tap the input to expand. Scroll to dismiss the keyboard. Swipe down to dismiss the sheet.
Made with Silk, on the web.
Swipe up or tap the input to expand. Scroll to dismiss the keyboard. Swipe down to dismiss the sheet.
Made with Silk, on the web.
Just shipped a big revamp of Silk examples' code.
Each example is now fully self-contained, making it much easier to just copy/paste into your own project.
The generic part of the example is now also structured as compound components, matching Silk's API and providing granular control.
v1 → v2
Each example is now fully self-contained, making it much easier to just copy/paste into your own project.
The generic part of the example is now also structured as compound components, matching Silk's API and providing granular control.
v1 → v2
June 2, 2025 at 5:50 PM
Just shipped a big revamp of Silk examples' code.
Each example is now fully self-contained, making it much easier to just copy/paste into your own project.
The generic part of the example is now also structured as compound components, matching Silk's API and providing granular control.
v1 → v2
Each example is now fully self-contained, making it much easier to just copy/paste into your own project.
The generic part of the example is now also structured as compound components, matching Silk's API and providing granular control.
v1 → v2
Detached side drawer. Scrollable, swipeable, stackable.
Made with Silk, on the web.
Made with Silk, on the web.
May 28, 2025 at 1:13 PM
Detached side drawer. Scrollable, swipeable, stackable.
Made with Silk, on the web.
Made with Silk, on the web.
The backdrop not covering the status bar when opening a sheet on the web makes it feel... subpar compared to native.
So in Silk I baked-in the ability to blend them together by automatically dimming the theme-color in sync with the backdrop opacity.
So in Silk I baked-in the ability to blend them together by automatically dimming the theme-color in sync with the backdrop opacity.
May 27, 2025 at 1:07 PM
The backdrop not covering the status bar when opening a sheet on the web makes it feel... subpar compared to native.
So in Silk I baked-in the ability to blend them together by automatically dimming the theme-color in sync with the backdrop opacity.
So in Silk I baked-in the ability to blend them together by automatically dimming the theme-color in sync with the backdrop opacity.
Little UX improvement to the music player example that'll come with the code revamp I'm working on: you'll be able to scroll the page right after swiping down the panel, without having to wait for the animation to end.
May 26, 2025 at 12:58 PM
Little UX improvement to the music player example that'll come with the code revamp I'm working on: you'll be able to scroll the page right after swiping down the panel, without having to wait for the animation to end.
Simple swipeable page on the web, made with Silk.
May 20, 2025 at 2:00 PM
Simple swipeable page on the web, made with Silk.
Want a sheet that can only be dismissed with a button tap?
With Silk just set the `swipeDismissal` prop to `false` and the sheet won’t be dismissible by swipe.
On iOS the user can still swipe the sheet, but it will snap back into place instead of closing.
With Silk just set the `swipeDismissal` prop to `false` and the sheet won’t be dismissible by swipe.
On iOS the user can still swipe the sheet, but it will snap back into place instead of closing.
May 15, 2025 at 2:59 PM
Want a sheet that can only be dismissed with a button tap?
With Silk just set the `swipeDismissal` prop to `false` and the sheet won’t be dismissible by swipe.
On iOS the user can still swipe the sheet, but it will snap back into place instead of closing.
With Silk just set the `swipeDismissal` prop to `false` and the sheet won’t be dismissible by swipe.
On iOS the user can still swipe the sheet, but it will snap back into place instead of closing.
Working on revamping @silk_hq examples' code to make them a lot more flexible and easier to drop into your project.
One change I’m making is switching from props as slots to compound components that match the actual API.
before → after
One change I’m making is switching from props as slots to compound components that match the actual API.
before → after
May 14, 2025 at 12:23 PM
Working on revamping @silk_hq examples' code to make them a lot more flexible and easier to drop into your project.
One change I’m making is switching from props as slots to compound components that match the actual API.
before → after
One change I’m making is switching from props as slots to compound components that match the actual API.
before → after
Detached sheet made with silkhq.co on the web.
Natural overshoot, status bar blending with the backdrop, swipe or click outside to dismiss.
Natural overshoot, status bar blending with the backdrop, swipe or click outside to dismiss.
May 13, 2025 at 12:22 PM
Detached sheet made with silkhq.co on the web.
Natural overshoot, status bar blending with the backdrop, swipe or click outside to dismiss.
Natural overshoot, status bar blending with the backdrop, swipe or click outside to dismiss.
Revamped the Community sheet and made it accessible through the nav. Really like that little sheet switching
May 6, 2025 at 5:57 PM
Revamped the Community sheet and made it accessible through the nav. Really like that little sheet switching
With Silk you get a nice <Sheet.Backdrop> sub-component that animates its opacity automatically as the sheet goes in and out of the view.
It also has a special prop to blend it with the iOS status bar, and you can make it respond to swipe or not. All fully configurable.
It also has a special prop to blend it with the iOS status bar, and you can make it respond to swipe or not. All fully configurable.
May 2, 2025 at 12:42 PM
With Silk you get a nice <Sheet.Backdrop> sub-component that animates its opacity automatically as the sheet goes in and out of the view.
It also has a special prop to blend it with the iOS status bar, and you can make it respond to swipe or not. All fully configurable.
It also has a special prop to blend it with the iOS status bar, and you can make it respond to swipe or not. All fully configurable.
Using Radix's DropdownMenu or other overlay components?
Silk is built to be fully compatible with all of them. Just added a guide about it to the docs.
Silk is built to be fully compatible with all of them. Just added a guide about it to the docs.
May 1, 2025 at 3:50 PM
Using Radix's DropdownMenu or other overlay components?
Silk is built to be fully compatible with all of them. Just added a guide about it to the docs.
Silk is built to be fully compatible with all of them. Just added a guide about it to the docs.
April 30, 2025 at 1:01 PM