Loading video...

Video Failed to Load

Go Home

depth stack slider - progress indicator - blur + gradient mask on underlying images - pointer, wheel and keyboard controls

tobi_ol's profile picture

tobi

1,538 subscribers

19,782 views • 11 months ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

css trick for the "shine" border 🧑‍🍳 take a pseudoelement position + give it an inset box-shadow mask it off at an angle with a linear-gradient 🤙 bonus: use corner-shape: squircle + rotate on pointer move
0:18

css trick for the "shine" border 🧑‍🍳 take a pseudoelement position + give it an inset box-shadow mask it off at an angle with a linear-gradient 🤙 bonus: use corner-shape: squircle + rotate on pointer move

jhey ʕ•ᴥ•ʔ

200,156 views • 7 months ago

new on Framer: pricing slider use this customizable component to showcase pricing tiers with animations and interactive controls. comment "PRICING" and i'll send you the component :)
0:11

new on Framer: pricing slider use this customizable component to showcase pricing tiers with animations and interactive controls. comment "PRICING" and i'll send you the component :)

Framer University

14,870 views • 1 year ago

really like the progress bar escape sequences. Hope tools pick up this feature soon. Easy to test with try & ai: try ghostty-progress && claude "implement a ruby script demo for the progress bar features mentioned at <release-notes-url>"
0:15

really like the progress bar escape sequences. Hope tools pick up this feature soon. Easy to test with try & ai: try ghostty-progress && claude "implement a ruby script demo for the progress bar features mentioned at <release-notes-url>"

tobi lutke

85,016 views • 10 months ago

SwiftUI introduced a new modifier on iOS 26+ that essentially removes the thumb from the Slider and transforms it into a draggable progress bar. Currently, there’s no way to adjust the size of the progress bar. However, by using the scale and other modifiers, we can create a progress bar that is similar to the iOS Volume slider! Modifier: sliderThumbVisibility()
0:10

SwiftUI introduced a new modifier on iOS 26+ that essentially removes the thumb from the Slider and transforms it into a draggable progress bar. Currently, there’s no way to adjust the size of the progress bar. However, by using the scale and other modifiers, we can create a progress bar that is similar to the iOS Volume slider! Modifier: sliderThumbVisibility()

Kavsoft

22,752 views • 8 months ago

Storefront Web Components let you add Shopify to any site. Web components are easy to embed into any HTML or CSS stack.
0:10

Storefront Web Components let you add Shopify to any site. Web components are easy to embed into any HTML or CSS stack.

tobi lutke

17,002 views • 1 year ago

Design Engineering 101: Make your number steppers feel awesome. A number stepper that only bumps once per click makes you click twenty times. Reward the hold. Animate it nicely with rolling digits, blur on transitions and gradient masks to avoid abrupt cuts.
0:13

Design Engineering 101: Make your number steppers feel awesome. A number stepper that only bumps once per click makes you click twenty times. Reward the hold. Animate it nicely with rolling digits, blur on transitions and gradient masks to avoid abrupt cuts.

alyx

73,555 views • 18 days ago

Gemma 4 sees a kid and three dogs. Decides what matters. Calls SAM 3.1 Mask and bounding box. Spotlight on subjects. Background blur. Background pixelation. Four effects. Fully agentic. Two models talking to each other on a MacBook. No App. No cloud. What would you edit?
0:15

Gemma 4 sees a kid and three dogs. Decides what matters. Calls SAM 3.1 Mask and bounding box. Spotlight on subjects. Background blur. Background pixelation. Four effects. Fully agentic. Two models talking to each other on a MacBook. No App. No cloud. What would you edit?

Maziyar PANAHI

30,513 views • 3 months ago

GROK 4.1 FAST JUST GOT SMARTER – PROGRESS ON AUTOPILOT With every tweak, Grok 4.1 Fast is secretly speed-running xAI intelligence! Progress Pulse: •⁠ ⁠Scores are climbing while rivals reread the instructions •⁠ ⁠Non-reasoning mode picks up IQ points without asking •⁠ ⁠Upgrades stack so fast the leaderboard can’t keep up •⁠ ⁠Pattern-spotting jumps prove Grok’s sharpening on schedule Progress on Grok feels less like updates and more like evolution on fast-forward! Source: Grok
0:19

GROK 4.1 FAST JUST GOT SMARTER – PROGRESS ON AUTOPILOT With every tweak, Grok 4.1 Fast is secretly speed-running xAI intelligence! Progress Pulse: •⁠ ⁠Scores are climbing while rivals reread the instructions •⁠ ⁠Non-reasoning mode picks up IQ points without asking •⁠ ⁠Upgrades stack so fast the leaderboard can’t keep up •⁠ ⁠Pattern-spotting jumps prove Grok’s sharpening on schedule Progress on Grok feels less like updates and more like evolution on fast-forward! Source: Grok

Mario Nawfal

98,569 views • 7 months ago

How I built with Claude 👇 1. CSS linear-gradient animated backgrounds create that deep blue oceanic atmosphere with zero images 2. Intersection Observer API staggers each section headline in as users scroll through the content 3.Use a fixed sticky nav with backdrop-filter blur signals authority and keeps users oriented 4. Save this if you want a corporate site that makes billion dollar clients take you seriously 🌐
0:14

How I built with Claude 👇 1. CSS linear-gradient animated backgrounds create that deep blue oceanic atmosphere with zero images 2. Intersection Observer API staggers each section headline in as users scroll through the content 3.Use a fixed sticky nav with backdrop-filter blur signals authority and keeps users oriented 4. Save this if you want a corporate site that makes billion dollar clients take you seriously 🌐

FHILY👑

135,817 views • 1 month ago

You can use Dall-E 3 in any app on your phone. It works on iOS and Android. 1. Download and activate Microsoft Swiftkey keyboard (link below) 2. Tap on the emoji then on the Designer icon 3. Write your prompt and insert your image Note: it generates 4 different images that you can also find later on the "Image Creator" website.
0:19

You can use Dall-E 3 in any app on your phone. It works on iOS and Android. 1. Download and activate Microsoft Swiftkey keyboard (link below) 2. Tap on the emoji then on the Designer icon 3. Write your prompt and insert your image Note: it generates 4 different images that you can also find later on the "Image Creator" website.

Paul Couvert

205,877 views • 2 years ago

Twitter I need your help! After a break from my dream monster taming game I decided to pivot from a mobile platform release and instead focus on a PC release. I already ported all the controls over to mouse and keyboard. How do you like the resolution and aspect ratio so far?
0:14

Twitter I need your help! After a break from my dream monster taming game I decided to pivot from a mobile platform release and instead focus on a PC release. I already ported all the controls over to mouse and keyboard. How do you like the resolution and aspect ratio so far?

Mario

76,294 views • 10 months ago

Creator seungho__yeo ( IG ) has been architecting a workflow that doesn't just generate images - it builds an entire visual universe. Environment Board → Fashion Board → Depth Extraction → Seedance Animation → Kinetic Edit One workflow. One visual language. A full New York sequence - Manhattan streets, yellow cabs, subway stations, rooftop editorials - animated and cut with crash zooms, hyperlapses, infinite zooms, and motion blur smears. The insight: stop thinking in single images. Start designing asset collections. The more insert shots, props, fashion details, and architecture you build upfront, the more powerful the final edit becomes.
0:18

Creator seungho__yeo ( IG ) has been architecting a workflow that doesn't just generate images - it builds an entire visual universe. Environment Board → Fashion Board → Depth Extraction → Seedance Animation → Kinetic Edit One workflow. One visual language. A full New York sequence - Manhattan streets, yellow cabs, subway stations, rooftop editorials - animated and cut with crash zooms, hyperlapses, infinite zooms, and motion blur smears. The insight: stop thinking in single images. Start designing asset collections. The more insert shots, props, fashion details, and architecture you build upfront, the more powerful the final edit becomes.

ComfyUI

19,412 views • 1 month ago

Describe your business and AI will get you started with just the right design. We have lots more coming on this front. Incredibly excited about how much more accessible entrepreneurship will become due to the power of AI tools.
0:14

Describe your business and AI will get you started with just the right design. We have lots more coming on this front. Incredibly excited about how much more accessible entrepreneurship will become due to the power of AI tools.

tobi lutke

39,531 views • 1 year ago

Here is the prompt to create a liquid gold nav bar :) Have fun experimenting! Create a floating navigation toolbar centered on screen. Dark background, glassmorphism toolbar with blur and subtle border. Core feature - Golden active indicator ring: A sliding highlight around the active button built with 4 CSS layers: Glow - blurred warm gold (#e8af48) behind the ring, opacity: 0.15 Clip container - overflow: hidden, border-radius: 18px - this clips the gradient Rotating conic-gradient - sized 200% and offset -50% so it spins from center. Rotates 4.5s linear infinite. The gradient must be heavily gold-dominant:70% of the gradient = gold tones (#533517 dark bronze → #c49746 warm gold → #feeaa5 light gold) 2 narrow white hotspots (#ffffff, each only ~3% wide) simulating studio light reflections Between each white hotspot, a very thin (~1.5% each) hint of #ffc0cb pink and - blue for subtle chromatic iridescence - these must stay minimal, the ring should read as GOLD not rainbow The pattern repeats twice across 360° for symmetry Inner plate - inset: 2px covers the center, only 2px of spinning gold ring visible. Background matches toolbar. The indicator slides between buttons with bouncy overshoot easing (cubic-bezier(0.34, 1.2, 0.64, 1)). 3 nav buttons (Home, Search, User) with thin stroke icons, separated by subtle dividers. Plus a dark/light theme toggle - sun/moon icons crossfade with rotate+scale. On toggle click, the button bounces up to 1.25× scale then springs back. Add film grain noise overlay and radial ambient glow.
0:15

Here is the prompt to create a liquid gold nav bar :) Have fun experimenting! Create a floating navigation toolbar centered on screen. Dark background, glassmorphism toolbar with blur and subtle border. Core feature - Golden active indicator ring: A sliding highlight around the active button built with 4 CSS layers: Glow - blurred warm gold (#e8af48) behind the ring, opacity: 0.15 Clip container - overflow: hidden, border-radius: 18px - this clips the gradient Rotating conic-gradient - sized 200% and offset -50% so it spins from center. Rotates 4.5s linear infinite. The gradient must be heavily gold-dominant:70% of the gradient = gold tones (#533517 dark bronze → #c49746 warm gold → #feeaa5 light gold) 2 narrow white hotspots (#ffffff, each only ~3% wide) simulating studio light reflections Between each white hotspot, a very thin (~1.5% each) hint of #ffc0cb pink and - blue for subtle chromatic iridescence - these must stay minimal, the ring should read as GOLD not rainbow The pattern repeats twice across 360° for symmetry Inner plate - inset: 2px covers the center, only 2px of spinning gold ring visible. Background matches toolbar. The indicator slides between buttons with bouncy overshoot easing (cubic-bezier(0.34, 1.2, 0.64, 1)). 3 nav buttons (Home, Search, User) with thin stroke icons, separated by subtle dividers. Plus a dark/light theme toggle - sun/moon icons crossfade with rotate+scale. On toggle click, the button bounces up to 1.25× scale then springs back. Add film grain noise overlay and radial ambient glow.

Leon Lin

72,887 views • 4 months ago

Prefer having the individual channels in OBS, but want the easy controls of using a broadcast stream mix? Parzival, FrostyCoolSlug and YorVeX are working on the "GoXLR Fader Sync" plugin for OBS to be used with GoXLR Utility. Check out the progress here:
0:13

Prefer having the individual channels in OBS, but want the easy controls of using a broadcast stream mix? Parzival, FrostyCoolSlug and YorVeX are working on the "GoXLR Fader Sync" plugin for OBS to be used with GoXLR Utility. Check out the progress here:

TC Helicon Gaming

22,565 views • 1 year ago

Jaden Loggins (‘25 TX) showed a quality 4-pitch mix with feel for it all. Fastball mid-80s T87 with late ride. Slider at 73-75 with teeth. Curve at 67-70 with healthy 11-5 shape and depth. Could drop it in and locate. Kills spin on the change with fade as well. Projects for more in the tank. #SouthElite PG_Uncommitted
0:11

Jaden Loggins (‘25 TX) showed a quality 4-pitch mix with feel for it all. Fastball mid-80s T87 with late ride. Slider at 73-75 with teeth. Curve at 67-70 with healthy 11-5 shape and depth. Could drop it in and locate. Kills spin on the change with fade as well. Projects for more in the tank. #SouthElite PG_Uncommitted

Perfect Game Texas

12,819 views • 2 years ago

Shopify merchants will be able to sell directly in ChatGPT. We’ve been working with OpenAI for quite some time so people can search and buy products in chat, and it’s something we’ve had a hard time keeping quiet. Rollout is coming very very soon.
0:11

Shopify merchants will be able to sell directly in ChatGPT. We’ve been working with OpenAI for quite some time so people can search and buy products in chat, and it’s something we’ve had a hard time keeping quiet. Rollout is coming very very soon.

tobi lutke

1,581,297 views • 9 months ago

Shopify is building the foundation for agentic commerce. Universal Commerce Protocol, which we co-developed with Google, is now live. UCP will make it faster for agents and retailers to integrate. It’s open by default, so platforms and agents can use UCP to start transacting with any merchant. Major retailers are already using it. Agents can handle everything from discovery to fulfillment, and support things like discounts, subscriptions, and loyalty programs. We’ve accounted for all types of commerce.
0:19

Shopify is building the foundation for agentic commerce. Universal Commerce Protocol, which we co-developed with Google, is now live. UCP will make it faster for agents and retailers to integrate. It’s open by default, so platforms and agents can use UCP to start transacting with any merchant. Major retailers are already using it. Agents can handle everything from discovery to fulfillment, and support things like discounts, subscriptions, and loyalty programs. We’ve accounted for all types of commerce.

tobi lutke

892,211 views • 6 months ago

Sidekick has 20+ new capabilities in this Edition. My favorite: it can create custom apps. Just prompt Sidekick, and it writes the app code using Polaris UI with Admin API GraphQL queries and mutations.
0:13

Sidekick has 20+ new capabilities in this Edition. My favorite: it can create custom apps. Just prompt Sidekick, and it writes the app code using Polaris UI with Admin API GraphQL queries and mutations.

tobi lutke

17,458 views • 7 months ago

I'll always root for a team that open-sources its best work, and Robbyant just did it properly. Robbyant, Ant Group's embodied-AI company, released LingBot-Vision, a vision foundation model for robots, and the part I love is the data. They trained it on 161M images, filtered down from 2B raw ones and mostly pulled straight from the open web, with no human labels, no edge detectors, no depth sensors anywhere in the loop. It learns the exact edges of objects from raw pixels. That's roughly a tenth of the data DINOv3 saw, and under a third of the training. And it shows in the results. On depth, working out how far away things are, the 1B model edges out a 7B on NYU-Depth. It also powers LingBot-Depth 2.0, which reads the surfaces cameras usually choke on, glass and mirrors, and halves indoor depth error. LingBot-Vision is fully open. Weights from the 1.1B flagship down to a tiny 21M version, code, and the paper. This is the timeline I want more of. Robbyant
0:10

I'll always root for a team that open-sources its best work, and Robbyant just did it properly. Robbyant, Ant Group's embodied-AI company, released LingBot-Vision, a vision foundation model for robots, and the part I love is the data. They trained it on 161M images, filtered down from 2B raw ones and mostly pulled straight from the open web, with no human labels, no edge detectors, no depth sensors anywhere in the loop. It learns the exact edges of objects from raw pixels. That's roughly a tenth of the data DINOv3 saw, and under a third of the training. And it shows in the results. On depth, working out how far away things are, the 1B model edges out a 7B on NYU-Depth. It also powers LingBot-Depth 2.0, which reads the surfaces cameras usually choke on, glass and mirrors, and halves indoor depth error. LingBot-Vision is fully open. Weights from the 1.1B flagship down to a tiny 21M version, code, and the paper. This is the timeline I want more of. Robbyant

Chubby♨️

48,249 views • 9 days ago