The spiral and the Globe
An exploration on cinematic view of a creative portfolio inspired by Sam Spratt
May 2025
“Steal Like an Artist” - they say.
“Stealing like an artist” has never been this tedious and challenging since the conception of that phrase. I have also never been frustrated and in awe of how the minds of truly phenomenal artists like “Sam Spratt” work.
Sam is an artist I have always adored, I marvel at his creations; “Luci”, amongst the numerous art he’s made - the depth of his work has to be experienced personally, be ready to give yourself, come bare, sharing the deepest part of yourself for the case of art - View here.
The spiral animation and the circle formatted selection (0-10 seconds) of the video you just enjoyed seeing above is an adopted concept from Sam. One where I exhaustively enjoyed replicating. Here’s my little attempt at refactoring the concept into a portfolio website for a photography portfolio with cinematic globe view.
Note from Bolaji: “I strongly advice grabbing a cup of coffee”
Let’s Get Started
Spiral Animation
For most portfolio website experience, a common loader experience is usually a text animation or number count before content start to actually populate. I thought having a spiral animation was genius, mainly because if feels immersive as you experience every choreographed entry and exit of elements and particles, twist and twirls, bounce, burst, timing sequence.
Mouse sensitivity
Move your cursor,
eye reacts
Spiral formation
Burst expansion on
circles.
“From the blink of an eye”
About 45 frames are formed, each one built atop of another, creating a unified choreographed dance, connecting from a cyclic rotation through to climax and expansion, strain leading to contraction and bounce.
Demo
What is Circle? and How does it work?
“Circle” is created to house clothing collections. It comprises SS26 (12), FW25 (18), Resort (14), Archive (100).
Interaction
Level
Demo 1
Select collection, zoom in
My favorite thing here is the cinematic zoom in on the collection, it almost draws you in as it slowly happens. On click on any selected circle - the cinematic zoom trigger, leading you to the selected circle under the collection it belongs.
Demo 2
Collection Index Page, Globe
With SS26 having about 12 selected collections, any selected collection gives you a detail view (The Globe). This detail view is a pathway, where anyone can see closely the detail of each image represented.
Demo 3
The Globe
The Globe, The subtle blur on view of any image acts as an highlighter, essentially mirroring focus on the selected image. Clicking on the image w
Demo 4
Cinematic Globe Transition
The interesting part is how it responds. Each look is spread across different spaces in no particular order, which creates that fluid sense of reaching from one point to another. I like to think of it as a solar system of curated images — that's really how I picture it.
Details
Proximity Illumination on Hover
To be honest, this is one of my favorite things to play with. The subtle glow on hover is such a pure delight that I enjoyed creating (about 2-3 hours), but definitely worth it. Wherever your mouse goes, light shines. Try zooming in.
Dark mode experience
Light mode experience
Thank You for Watching
You can also explore this project, feel free to break as many globes as possible - just know that if you excessively turn them, it gives me fatigue.
Really, I hope you enjoy this as much as I enjoyed making it!
Enjoy more here:
