Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

Arrow Dynamics (by Framer.zip) is a single code-component library that lets you create interactive 2D animations and patterns right inside Framer 🎛️ Tried to create something different for the landing page. (Link ↓) P.S: Flat design is over ✨

Rahul Chakraborty

21,964 subscribers

107,895 views • 2 years ago •via X (Twitter)

Arts Science & Technology Education

Anya Rossi• Live Now

Private livecam show

10 Comments

Rahul Chakraborty2 years ago

Shoutout to @rohanchkrabrty for building and optimising the component. 🙌 Checkout →

Rahul Chakraborty2 years ago

Design & Build: @figma @framer

Pulkit Garg(Ux Mamba)2 years ago

@FramerZip @framer It is totally insane man, Attention to details is super amazing😍.

Rahul Chakraborty2 years ago

@johnrya94082798 @FramerZip @framer Appreciate it! Thanks!

abhinav gupta2 years ago

@FramerZip @framer this is sooo cooool 🤝🏽🫡

Rahul Chakraborty2 years ago

@FramerZip @framer Thanks man!

Paul Lapkin2 years ago

@FramerZip @framer Incredible Work 🔥

Rahul Chakraborty2 years ago

@FramerZip @framer Thank you Paul! ❤️ I loved your recent framer work too ⚡️

Abe2 years ago

@FramerZip @framer The Truchet Loop is such a brilliant idea. Well executed! 🔥

Rahul Chakraborty2 years ago

@FramerZip @framer Thank you! It was one of the most fun variations.

Related Videos

Announcing Custom Components on Magic Patterns Create a component, add it to your library, reuse it on anything you create. Using your design system has already been live in beta for 1000s of customers and the results are absolutely INSANE.

Announcing Custom Components on Magic Patterns Create a component, add it to your library, reuse it on anything you create. Using your design system has already been live in beta for 1000s of customers and the results are absolutely INSANE.

Alex Danilowicz

33,189 views • 11 months ago

With Replit ⠕ Design, you can create high-quality scroll animations for your landing pages in under five minutes— all from a single prompt.

With Replit ⠕ Design, you can create high-quality scroll animations for your landing pages in under five minutes— all from a single prompt.

Vaibhav Kumar

180,359 views • 4 months ago

✨ Beginner Framer Tutorial Let's create a simple landing page for a product launch. 🪄 🧠 You're going to learn: - how to add a sign up form to your page - how to set up different breakpoints - how to customize 404 page - and many more 👀 💿 Remix in the comments.

✨ Beginner Framer Tutorial Let's create a simple landing page for a product launch. 🪄 🧠 You're going to learn: - how to add a sign up form to your page - how to set up different breakpoints - how to customize 404 page - and many more 👀 💿 Remix in the comments.

Framer University

81,306 views • 3 years ago

🚀 State Machines are here. Create interactive animations without code. Set transitions, states & triggers, and then export a single dotLottie for web & mobile. ✨ Explore interactivity: #LottieStateMachines #dotLottieStateMachines #InteractiveAnimations

🚀 State Machines are here. Create interactive animations without code. Set transitions, states & triggers, and then export a single dotLottie for web & mobile. ✨ Explore interactivity: #LottieStateMachines #dotLottieStateMachines #InteractiveAnimations

LottieFiles

14,200 views • 8 months ago

Introducing Code on Canvas in Pencil.dev AI design tool for Claude and Codex. Design ❤️ Code are officially in a relationship, opening new ways to create on canvas. Ask agent to generate custom design tools inside Pencil on the fly, create interactive components, generative art and more, but still keep the full manual design control. This is just the beginning. Let us know what you think. And let's take it to the next level together. Download the new Pencil update today.

Introducing Code on Canvas in Pencil.dev AI design tool for Claude and Codex. Design ❤️ Code are officially in a relationship, opening new ways to create on canvas. Ask agent to generate custom design tools inside Pencil on the fly, create interactive components, generative art and more, but still keep the full manual design control. This is just the beginning. Let us know what you think. And let's take it to the next level together. Download the new Pencil update today.

Tom Krcha

78,374 views • 1 month ago

Wow... This Claude Code Design Hack is wild. When building landing pages, don't ask for a single landing page. Ask for a directory of landing page options... and in your 1st prompt tell it to learn from your preferences as you generate more. Use this prompt below 👇

Wow... This Claude Code Design Hack is wild. When building landing pages, don't ask for a single landing page. Ask for a directory of landing page options... and in your 1st prompt tell it to learn from your preferences as you generate more. Use this prompt below 👇

Chorus.com

185,685 views • 5 months ago

This is the quality of work you get only when urdesignwhiz studio handles your landing page project 🤯 Design + custom motion + Framer dev flat at $1050 … A steal 😍 Fun fact this one single work got me the Framer expert tag on Contra View the full project details here on contra ->

This is the quality of work you get only when urdesignwhiz studio handles your landing page project 🤯 Design + custom motion + Framer dev flat at $1050 … A steal 😍 Fun fact this one single work got me the Framer expert tag on Contra View the full project details here on contra ->

Ur Designwhiz

20,840 views • 8 months ago

Just found a tool that lets you create custom fonts in minutes 😲 Tested it in Framer and it works flawlessly. The Internet is crazy good

Just found a tool that lets you create custom fonts in minutes 😲 Tested it in Framer and it works flawlessly. The Internet is crazy good

Yahya

23,729 views • 4 months ago

New Framer component drop: Grid Warp ⚡️ Interactive, grid-based image distortion with smooth release + chromatic aberration. And of course, no code needed (that was my job). Comment “WARP” and I’ll send it to you for free. P.S. Follow me so I can DM you.

New Framer component drop: Grid Warp ⚡️ Interactive, grid-based image distortion with smooth release + chromatic aberration. And of course, no code needed (that was my job). Comment “WARP” and I’ll send it to you for free. P.S. Follow me so I can DM you.

David McBacon | Framer Coder

13,256 views • 1 year ago

Design just changed - again! Recraft new Chat Mode lets you create and refine visuals through conversation, right inside your design workspace. Recraft helped me create a logo, changed the aspect ratio in the chat window with a prompt, and then made further edits!

Chubby♨️

16,273 views • 7 months ago

Advanced Framer by Dan Hollick is finally out! Take your understanding of Framer to the next level by building a complete site from start to finish. Lessons Include Layout, Animations, and even Code Overrides! Be quick and grab that -20% discount!

Advanced Framer by Dan Hollick is finally out! Take your understanding of Framer to the next level by building a complete site from start to finish. Lessons Include Layout, Animations, and even Code Overrides! Be quick and grab that -20% discount!

Framer

15,466 views • 2 years ago

"Nice design but you wont be able to make it responsive!" Right. Responsive design in Framer. Biggest takeaway: - What takes about 20 min to create in Figma - Takes about 2 days to create in Framer First iteration WIP.

"Nice design but you wont be able to make it responsive!" Right. Responsive design in Framer. Biggest takeaway: - What takes about 20 min to create in Figma - Takes about 2 days to create in Framer First iteration WIP.

Tyrone C.

14,391 views • 1 year ago

In @Magicpathai every component is a conversation. Edit and refine, either manually or with AI. Design is the art of keeping good decisions. MagicPath lets you copy and paste interactive components across the canvas to explore and perfect your ideas.

In @Magicpathai every component is a conversation. Edit and refine, either manually or with AI. Design is the art of keeping good decisions. MagicPath lets you copy and paste interactive components across the canvas to explore and perfect your ideas.

Pietro Schirano

53,079 views • 1 year ago

You can now create AI agents directly from your phone. Replit lets you create them without writing a single line of code and completely for free. Just duplicate the template and you're ready to go. Links below

You can now create AI agents directly from your phone. Replit lets you create them without writing a single line of code and completely for free. Just duplicate the template and you're ready to go. Links below

Paul Couvert

188,247 views • 1 year ago

Just dropped my latest Framer template for AI/SaaS website🚀 ✨Multi-layout and creative design ✨Smooth and catchy animations. ✨Build with 0 code and customize with ease. Link below🔗

Just dropped my latest Framer template for AI/SaaS website🚀 ✨Multi-layout and creative design ✨Smooth and catchy animations. ✨Build with 0 code and customize with ease. Link below🔗

Sang

15,361 views • 2 years ago

This week's CodePen.IO challenge is all about CSS art and illustration 🖼️ Great resources on the challenge page and an article written by me all about how to create different shapes and approach different patterns 🤙 All that practice led to this 😅 Article below! 👇

This week's CodePen.IO challenge is all about CSS art and illustration 🖼️ Great resources on the challenge page and an article written by me all about how to create different shapes and approach different patterns 🤙 All that practice led to this 😅 Article below! 👇

jhey ʕ•ᴥ•ʔ

52,988 views • 2 years ago

🖋️ A complete reimagining of vector editing in Framer. Draw shapes and paths right on your canvas, create custom Vector Sets with variables, and, best of all, dive into vector animations starting with the stroke effect. This is just the beginning for vectors.

🖋️ A complete reimagining of vector editing in Framer. Draw shapes and paths right on your canvas, create custom Vector Sets with variables, and, best of all, dive into vector animations starting with the stroke effect. This is just the beginning for vectors.

Framer

30,307 views • 1 year ago

At Misaki Studio, we believe in kindness and love, values that will always be at the heart of everything we create. To evoke the same feelings in our visitors, our landing page now features interactive koi fish 💕symbols of strength, perseverance, and transformation. The tool that we are making will most transformative around design, animation and code.

At Misaki Studio, we believe in kindness and love, values that will always be at the heart of everything we create. To evoke the same feelings in our visitors, our landing page now features interactive koi fish 💕symbols of strength, perseverance, and transformation. The tool that we are making will most transformative around design, animation and code.

Kishan / Founder at Misaki Studio

17,786 views • 8 months ago

Every time you switch between design and code, you lose something, your momentum, your fidelity, or your vision. The gap between what you designed and what ships has always been the cost of building. That’s why we built Wonder, a design tool where everything you create is backed by real code. Public Alpha is now live at

Every time you switch between design and code, you lose something, your momentum, your fidelity, or your vision. The gap between what you designed and what ships has always been the cost of building. That’s why we built Wonder, a design tool where everything you create is backed by real code. Public Alpha is now live at

Wonder

1,271,064 views • 1 month ago

In exclusive collaboration with the Womp team, we’ve crafted a unique approach that lets you create the most astonishing animations inside After Effects. Enroll here:

In exclusive collaboration with the Womp team, we’ve crafted a unique approach that lets you create the most astonishing animations inside After Effects. Enroll here:

Motion Design School

20,634 views • 2 years ago