Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

tobi_ol's profile picture

tobi

1,539 subscribers

19,875 görüntüleme • 1 yıl önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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 görüntüleme • 9 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 11 ay önce

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,783 görüntüleme • 10 ay önce

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,006 görüntüleme • 1 yıl önce

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

74,545 görüntüleme • 2 ay önce

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,565 görüntüleme • 5 ay önce

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 görüntüleme • 9 ay önce

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👑

138,336 görüntüleme • 3 ay önce

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 görüntüleme • 2 yıl önce

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,325 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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

50,089 görüntüleme • 1 ay önce

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 görüntüleme • 2 ay önce

-30kg, -10cm width, -20cm wheel base, the 2026 Formula 1 car will be lighter, smaller and more nimble than its predecessor! 🏎️ Go more in depth into the 2026 FIA Formula 1 Technical Regulation on FIA YouTube channel ➡️ #FIA Formula 1
0:16

-30kg, -10cm width, -20cm wheel base, the 2026 Formula 1 car will be lighter, smaller and more nimble than its predecessor! 🏎️ Go more in depth into the 2026 FIA Formula 1 Technical Regulation on FIA YouTube channel ➡️ #FIA Formula 1

FIA

132,401 görüntüleme • 2 yıl önce

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 görüntüleme • 6 ay önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 2 yıl önce

Shopify’s is special because of all the incredible people that work here. And because of this kind of beautiful nonsense 😆
0:19

Shopify’s is special because of all the incredible people that work here. And because of this kind of beautiful nonsense 😆

tobi lutke

112,801 görüntüleme • 2 yıl önce

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,583,814 görüntüleme • 11 ay önce