I just added this grid effect to my portfolio

@adrien.ninet

315.1K followers · usually 8.8K views a post

Views

832.2K

Likes

672

Comments

15

Shares

28

SoundTikTok sound · original sound - yvngonceb4

Promoted product

Framerframer.com

Go from idea to launch with an agent that designs and builds on the canvas. Keep each change editable, with hosting, security, analytics, CMS, and SEO built in.

21 videos10 creators

Why it worked

The video provides immediate, actionable value by solving a specific design problem with a quick, easy-to-follow tutorial, making the product feel like an essential tool for the viewer's own workflow.

Summary

The creator demonstrates how to quickly add a grid hover effect to a website using the Framer platform. He guides the viewer through finding, copying, and customizing the component before publishing the site.

Structure

1Showcase the final effect
2Explain the ease of implementation
3Step-by-step tutorial on Framer
4

Original caption

I just added this grid effect to my portfolio - took me 5 minutes. Comment "EFFECT" for the free component link. #framer #webdesign #designworkflow #uidesign #nocode

More from @adrien.ninet

Product placement

Framer is the central tool used throughout the video for the tutorial.

Call to action

Comment "EFFECT" for the free component link.

On-screen text

I just added this grid effect to my portfolio 5 minutes Brand & Web Designer startups can count on! Get Started Framer Grid Hover Effect Green Color yah hool Comment effect and I'll send you the link copy Follow for more

Transcript

I just added this grid effect to my portfolio. Took me 5 minutes. Let me show you how easy it was to make. First, go to Framer resources and find this grid components. Comment effect and I'll send you the link. Next, copy the component and paste it into your design. Then, just customize the colors to match your style. Click publish and your site is live. Follow for more design tips.