返回视频列表

Framer

Framer Update: Interactive Shaders

平台
YouTube
时长
1:20
片中语言
美国英语
播放量
5615
人脸出镜
0%
暗部画面
100%
Framer Framer Update: Interactive Shaders at 0:00
FramerFramer Update: Interactive Shaders
0:00
Framer Framer Update: Interactive Shaders at 0:04
FramerFramer Update: Interactive Shaders
0:04
Framer Framer Update: Interactive Shaders at 0:07
FramerFramer Update: Interactive Shaders
0:07
Framer Framer Update: Interactive Shaders at 0:13
FramerFramer Update: Interactive Shaders
0:13
Framer Framer Update: Interactive Shaders at 0:16
FramerFramer Update: Interactive Shaders
0:16
Framer Framer Update: Interactive Shaders at 0:28
FramerFramer Update: Interactive Shaders
0:28
Framer Framer Update: Interactive Shaders at 0:37
FramerFramer Update: Interactive Shaders
0:37
Framer Framer Update: Interactive Shaders at 0:40
FramerFramer Update: Interactive Shaders
0:40
Framer Framer Update: Interactive Shaders at 0:58
FramerFramer Update: Interactive Shaders
0:58
Framer Framer Update: Interactive Shaders at 1:16
FramerFramer Update: Interactive Shaders
1:16

Framer Update: Interactive Shaders 的文字记录

由语音模型根据影片自身的音轨转写，并非品牌撰写。点击任意一行即可跳到那一刻。

  1. 0:00We're bringing interactive shaders to Framer starting with the Ripple shader.
  2. 0:05Ripple is an interactive shader that distorts an image with smooth water-like ripples that follow your cursor.
  3. 0:13Through properties like radius, strength, decay, displacement and dispersion,
  4. 0:18you can customize the ripple's size, intensity, motion and color split.
  5. 0:23What's unique about these interactive shaders in Framer is that they support spring-based
  6. 0:30cursor tracking, effectively blending motion-style interaction with WebGL shaders.
  7. 0:37Out of the box, the effect is applied around your cursor as you hover and move it around
  8. 0:43on any image.
  9. 0:45And there's two details worth mentioning.
  10. 0:47One, we have an optional click property that also sends ripples out as you click the image.
  11. 0:54And two, if we click drag, the ripple effect is amplified,
  12. 1:00making the effect feel a touch more realistic.
  13. 1:04The ripple shader is out now in Framer.
  14. 1:07Thank you for watching and stay tuned for more updates coming soon.
14 行 · 153 字

More from Framer

All of Framer →

The rest of their work we have taken apart.

Framer 3.0 with Agents, Branching, and a new CommunityLaunch952K views
Framer
Framer 3.0 with Agents, Branching, and a new Community
1:1532 frames4.1s cut0% face
Framer Agents: Design with AI, Keep Control.935K views
Framer
Framer Agents: Design with AI, Keep Control.
0:3614 frames7% face
Framer - Introducing the Framer F1 Keyboard. A low-profile mechanical keyboard...Launch360K views
Framer
Framer - Introducing the Framer F1 Keyboard. A low-profile mechanical keyboard...
0:3110 frames0% face
📄 Turning Framer from a web builder into a true design tool with Desi...324K views
Framer
📄 Turning Framer from a web builder into a true design tool with Desi...
0:5528 frames6.2s cut39% face
This is the best Seedance hack ever. You can convert any 16:9 video ...187K views
Framer
This is the best Seedance hack ever. You can convert any 16:9 video ...
0:3414 frames6.2s cut7% face

Lit and framed like this

Closest on how much of the running time has a face in it and how dark the frames are.

Speak your mind with voice to voice on Perplexity.13M views
Perplexity
Speak your mind with voice to voice on Perplexity.
0:3613 frames0% face
Vercel Ship is back. Join us on June 25 (NYC and online) to hear upd...Launch11M views
Vercel
Vercel Ship is back. Join us on June 25 (NYC and online) to hear upd...
0:083 frames0% face
Introducing Linear Agent. Built directly into Linear and accessible ...Launch6.3M views
Linear
Introducing Linear Agent. Built directly into Linear and accessible ...
0:5518 frames0% face
bro created an AI job search system for Claude Code that scored 700+ ...5.8M views
ℏεsam
bro created an AI job search system for Claude Code that scored 700+ ...
0:238 frames0% face
Like any post with “Config” You’ll get a surprise4.1M views
Figma
Like any post with “Config” You’ll get a surprise
1 frames0% face
Issue tracking is dead. We are building what comes next.2.1M views
Linear
Issue tracking is dead. We are building what comes next.
0:114 frames0% face
Computer is now on Android.1.5M views
Perplexity
Computer is now on Android.
9 frames0% face
Sonnet-3.7 is available in Cursor! We've been very impressed by it...1.1M views
Cursor
Sonnet-3.7 is available in Cursor! We've been very impressed by it...
0:176 frames0% face
BLACKBOX AI uses ElevenLabs Agents to power Logger and Robocoder - vo...1.1M views
ElevenLabs
BLACKBOX AI uses ElevenLabs Agents to power Logger and Robocoder - vo...
0:239 frames0% face
Vercel Domains just got a full rebuild: • Search without logging in ...925K views
Vercel
Vercel Domains just got a full rebuild: • Search without logging in ...
0:155 frames0% face
We are joining @MercedesAMGF1 as a multi-year strategic partner. Firs...906K views
Vercel
We are joining @MercedesAMGF1 as a multi-year strategic partner. Firs...
0:103 frames0% face
Excited to share our newly improved website for @xai. We overhauled e...827K views
Benji Taylor
Excited to share our newly improved website for @xai. We overhauled e...
0:145 frames0% face

More social

Same category, other makers, most watched first.

Your ideas, your apps—Base44622M views
Base44
Your ideas, your apps—Base44
0:5651 frames1.1s cut6% face
Turn any idea into an app with Base44538M views
Base44
Turn any idea into an app with Base44
0:5538 frames2.2s cut50% face
Build Your Website with One Sentence | Base44154M views
Base44
Build Your Website with One Sentence | Base44
0:4835 frames0.9s cut31% face
Rip The Script | Nike Football81M views
Nike Football
Rip The Script | Nike Football
6:00310 frames1.1s cut60% face
PetSmart | "Pickup in...STORE!"75M views
PetSmart
PetSmart | "Pickup in...STORE!"
0:1511 frames1.4s cut64% face
NEO The Home Robot Order Today69M views
1X
NEO The Home Robot Order Today
9:53271 frames2.8s cut25% face
Apple Education: Ready for every learning opportunity69M views
Apple
Apple Education: Ready for every learning opportunity
1:4687 frames1.3s cut40% face
Phone calls suck. So, we bought a giant telephone car, raised $65,00...64M views
Bland
Phone calls suck. So, we bought a giant telephone car, raised $65,00...
1:4854 frames4.3s cut81% face
Oh wait there’s more: we’re building 3D Transforms, here’s a preview ...39M views
Figma
Oh wait there’s more: we’re building 3D Transforms, here’s a preview ...
1:0423 frames4.0s cut78% face
Getting Help is Simple, With Hims36M views
hims
Getting Help is Simple, With Hims
0:3023 frames2.0s cut70% face
Made in Figma (2025) Like this ❤️ we designed it for you36M views
Figma
Made in Figma (2025) Like this ❤️ we designed it for you
0:3872 frames0.5s cut7% face
Hello, MacBook Neo35M views
Apple
Hello, MacBook Neo
3:50291 frames67.5s cut1% face
Browse every frame in the library