Start a project
JellyLens
A homepage for a secondhand lens shop, with a fluid hover effect, a scroll-driven product animation, and a mini game that teaches people what old glass actually looks like.
A shop page that teaches rather than only sells, because what is being sold is a look and not a spec sheet.
Deliverables
- Homepage design
- Fluid hover animation
- Guess That Lens mini game
- Icon set
- Scroll animation
Overview
Secondhand glass is bought for its character, which is exactly the thing a product listing cannot describe. The page is built around showing that instead, in three pieces: something to touch, something to play, and something to watch.
Blender, Webflow, WebGL Fluid Enhanced and GSAP do the work. ChatGPT handled a good share of the development logic, which kept the time on design rather than on plumbing.
Hover
The hover effect uses WebGL Fluid Enhanced, tuned to the branding rather than left at its defaults, so it reads as part of the brand instead of as a demo bolted onto it.
Guess That Lens
The mini game runs on JavaScript and a Google Sheet, so lens entries can be added without touching the site. The list was generated with ChatGPT and the sample images sourced from Flickr, three per lens.
It is the part that does the educating. Asking somebody to recognise a lens by its rendering puts underrated glass in front of them far more effectively than a paragraph about it would.
Icons and scroll
Line-based icons match the minimal logo and keep the page quiet around the animation.
The scroll animation follows the approach Apple uses on product pages: a Sketchfab camera model animated in Blender, then driven by GSAP against scroll position, so the object turns at the speed you are reading.
