Framer Update, Animations

Framer Update: Holo Shader

Framer Update: Holo Shader

Framer Update: Holo Shader

Benjamin

·

1:46

·

5.8K views

·

About this lesson

Introducing a brand new addition to our Shader library: Holo. A gradient shader that simulates how light splits into rainbows on holographic surfaces. Instead of colors, you control the math that shapes the colors, and the way the shader warps and flows. Holo is now available in the Insert Panel, under Shaders. Watch the video to learn more about how to customize Holo. https://framer.com/updates/holo-shader/

Sign up: https://framer.link/yt

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00Yo, my name is Benjamin and this is the0:03new holo shader in Framer. This is a0:06beautiful gradient like shader and one0:09that doesn't include [music] custom0:11colors. Instead, it simulates how light0:13splits into rainbows on holographic0:16surfaces. [music]0:17The colors then emerge from math that0:20you can control. So, let's have a look.0:22Like all gradient shaders in Framer,0:25holo is extremely customizable and also0:27includes a seed property giving you0:30infinite variety of the patterns that0:33shape [music] it. We can also control0:34the animation speed, the scale, and then0:38properties like amplitude, definition,0:40and warp define how the shader flows.0:44So, a bunch of fun controls that let you0:47customize it and make it your own. As0:49mentioned, we can influence the colors.0:52Here we have a much warmer holographic0:55shader as here we customized colors like0:58fringe and iridescence to get this1:01warmer feel. Plus, we've also added some1:04holo specific filters letting you1:06customize it even further. The holo1:09shader is maybe more flexible than you1:12might think as you can tweak these1:14properties to get some really unique1:16results. As you can see here, we've1:18created something that feels quite1:20different from these past two, something1:22that feels less holographic and more1:25like a subtle colorful backdrop. The1:28holo shader is now available in the1:30insert panel under shaders. That's it1:33for this video. Thank you so much for1:35watching [music] and stay tuned for more1:38updates coming soon.

Watch on YouTube ↗

More in this topic

Framer Update: Logo Shaders2:05
Framer Update: Logo Shaders
Framer Update12K views · 1 month ago
Framer Update: CMS 3.04:13
Framer Update: CMS 3.0
Framer Update14K views · 1 month ago
Framer Update: Auto Translate3:09
Framer Update: Auto Translate
Framer Update4K views · 2 months ago
Framer Update: Stack Sorting and Bento Grids2:16
Framer Update: Stack Sorting and Bento Grids
Framer Update7K views · 2 months ago
Shader: Chromatic Aberration1:56
Shader: Chromatic Aberration
Framer Update7K views · 2 months ago
Framer Shaders2:28
Framer Shaders
Announcement23K views · 2 months ago
Framer Convert5:42
Framer Convert
Framer Update13K views · 3 months ago
Framer Update: Flow Effect in Layout Templates2:12
Framer Update: Flow Effect in Layout Templates
Framer Update10K views · 3 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.