The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Repline is a free fitness coach template I designed and built in Framer. Here’s what I learned making it move without making it heavy:
1- Every effect has a still version. The WebGL hero opens as a panning shot and settles into focus, but people who prefer reduced motion get the plain photo. So does the Framer canvas, so editing stays fast.
2- Pin on big screens, swipe on small ones. On desktop, How it works pins and slides as you scroll (GSAP ScrollTrigger). On phones the same cards swipe and snap, which feels more natural with a thumb.
3- Shaders go behind content, never on top. Four native Framer shaders add depth behind the member story, the results and the booking section, while the words stay on clean cards.
4- Let the client edit motion as plain text. The results chart plays one client’s 12 weeks from a line like “Deadlift | 80 | 120”, so a coach can update it without touching code.
It’s free to remix. Live preview: repline.framer.website
Which effect would you cut from most websites you see?
Giving every effect a still version for reduced motion is such a good habit, and keeping the Framer canvas light while editing is an underrated detail. Thanks for the breakdown.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
New template for craft studios, pottery studios and creative workshops. Meet Handsel.
Visitors find a class, see which dates are open, nearly full or sold out, and either book through your own booking tool or send a request that lands in your inbox. Tutors, crafts, open studio plans, private groups and gift cards each get their own page, all in the Framer CMS.
16 pages, 7 CMS collections, real content, no lorem.
Get it here → https://contra.com/products/lHTpjaNx-handsel-creative-workshop-and-pottery-studio-framer-template
Omg this is very clean and creative, interactive love the text spacing and overall design concept
The same font can look different. (Look at the headline/main text)
Look at the letter spacing. Look at the line height.
When I import design from Figma to Framer, these things often change, so it's must to double check it.
Ye le Jani is post ke liye:
So true! 👌 This is such an underrated detail. Figma to Framer import always messes with letter spacing and line height - the same font ends up looking totally different if you don't double check. Great reminder to QA the typography properly!
I've been working on Cervia, a @Framer website for a single product.
A good single-product site combines the landing page and the store in one page, so the call to action is the purchase itself. Visitors learn what the product is, see why it’s better, and add it to the cart without leaving the page.
The challenge is making one page do both jobs. It has to look like a landing page, with room to explain the product and show it well, and still work like a store product page, with the price, colors and Add to cart always close at hand.
Every extra step between arriving and paying loses some buyers, so I kept the steps to a minimum.
This is so well put Heron! 🔥 Single-product site logic is spot on - landing + store in one page removes friction, CTA is purchase itself. No wandering around. Visitors learn what it is, why it's better, add to cart without scrolling through 5 pages - that's conversion gold!...