6 months ago, I started working on a new version of the @Framer University website. Now, it’s finally here!. For beginners and pros alike, it's the daily hub for the best Framer resources and tutorials. Link below: ↓

↓ remix & demo:.

What do you want to know?.

just recreated this circular selection on scroll in @framer. crazy how smooth it feels — and all done without a single line of code. check it out below: ↓

HOW TO: make smooth interactions even SMOOTHER in @framer:. comment "FLUID" and i'll send you the secret ingredient.

this 3D cube looping animation by @Reijo but in @framer style? 👀.

RT @learnframer: ever wanted to add interactive 2d effects to your @framer site?. let me show you how and reveal a design tool that makes i….

bottom line: hana lets you add custom 2d effects to framer with almost no effort. try the community library, remix some interactions, and drop them in. your visitors (and your portfolio) will thank you.

embedding in framer is simple:. •select your final frame in hana.•export as an embed link.•in framer, drop in an embed component, paste the link, and pin it. done. instant interactive effect.

time to animate:. •select the gradient, solid, and outline layers.•add a follow cursor interaction.•damping ~20 for smoothness.•tweak hover-out speed so it drifts back to center naturally.

step 5: add an outline. •duplicate again.•remove fill, add a stroke in your highlight color. now you’ve got color, gradient, and outline layers sitting under the cut-out text.

step 3: add the color. •place another rectangle beneath the windows with a highlight color.•round the corners for softness. step 4: add a gradient. •duplicate, switch to radial gradient.•fade from 10% opacity to 0%.

step 2: create the windows. •draw a solid rectangle below the text.•select both → subtract boolean operation.•this cuts the text out of the rectangle, leaving see-through windows.

step 1: set up your canvas. •create a 500×500 frame.•add a text layer with repeated words (ex: “hana”).•adjust font, weight, and spacing.

example we’ll build:. a block of text that highlights with gradients and outlines as your cursor moves across it. the trick? a “window” layer cuts through a rectangle, revealing animated colors that follow the mouse.

what is hana?. it’s a tool for creating interactive effects like animated arrows, cursor trails, text highlights, and blur reveals. everything you make exports as an embed link you can drop straight into framer. zero setup.

ever wanted to add interactive 2d effects to your @framer site?. let me show you how and reveal a design tool that makes it effortless. 🧵

kids should learn @framer in school.

final step: preview your site. hover over your buttons, images, or logos and watch that smooth apple-style interaction come alive. tiny detail. massive upgrade in how premium your site feels.

pro tip:. if you’re adding it to multiple buttons or cards, drop it inside the component itself. that way every instance of that component automatically gets the effect—no extra work.

once it’s on your canvas, you can customize everything in the right-hand panel:. •base, hover, and press colors.•size and radius.•magnetism (snap strength).•children movement (adds depth).•hide cursor.•z-index

you can set it up two ways:. 1.fixed size → define width/height, pin it to all sides, and it highlights a set area. to content → set to “fit content” and it automatically wraps your element.