वीडियो पर वापस

Framer

Framer Update: Interactive Shaders

प्लैटफ़ॉर्म
YouTube
अवधि
1:20
बोली जाने वाली भाषा
अमेरिकी अंग्रेज़ी
व्यूज़
5.6 हज़ार
स्क्रीन पर चेहरा
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 शब्द