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
I’m building Distorted Scroll Gallery, a Framer code component for visual portfolios.
As you scroll, full-screen projects transition through a fluid distortion effect. The goal is to make moving between projects feel as considered as the work itself.
I’ve been testing it with architecture, product, and editorial imagery. Here’s a short preview of the interaction.
Would you use this on a portfolio or studio site? I’d love to hear what you’d want to customize before I release it.
the fluid transitions make moving through the portfolio feel like part of the work itself—great direction.
Thanks, Vineet! That’s exactly the experience I was going for. Glad the transitions came through that way!
The distortion is a nice touch.
Thanks! Glad you liked the distortion effect. Really enjoyed experimenting with this one!
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
Photographer Portfolio Website
"Capturing light, emotion, and the moments you never want to forget." That line set the tone, and the layout follows it.
The hero is one motion-blurred portrait washed in red. The photographer's name runs across the bottom in a condensed white face, so large the screen cuts it off. The photo keeps its soft focus, and the name still reads first.
Thin grid lines split the page into narrow columns, and the small copy sits justified inside them. The loose photo gets a strict structure to lean on.
A single round red button with an arrow sits right on the letters and marks where to go next.
Designed by the Hue & Machine team.
#WebDesign #Photography #PortfolioWebsite #EditorialDesign #Typography #UIDesign #ProductDesign #CreativeDirection #ResponsiveDesign #FigmaDesign
The heavy condensed white FLORENCE over the red portrait is bold, and keeping the same red across phone, laptop and type tile makes the case study read as one system. Did the red come from the photographer's own work, or was it your call?
Branding & Visual Identity for AirCon West based in London.
Designers! Present your work with motion! It breathes life into your work and conveys your ideas in a dynamic way.
Use free online motion tools to do it.
My favorites:
https://animos.app/
https://arqe.ai/
https://orelin.app/editor
https://openvid.dev/en
(Or animate it yourself, like I did here using EffectCraft!)
Nice work!!
Rebuilt my portfolio with AI and added new case studies.
Brand, web, and product UI. All custom coded, all in one page.
One page with brand, web and product UI together is a strong move. Clients see the range without clicking around. Rebuilding mine with AI coding tools taught me the same thing: the speed lets you spend the saved time on the case study writing, which is what actually wins work.