Orikata: Tactile E-Commerce with Pure CSS OrigamiOrikata: Tactile E-Commerce with Pure CSS Origami
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
Orikata is an online shop for a paper studio. The studio is based in Kyoto and Portland. The hero section shows a 3D paper craft. The paper folds and opens using pure CSS. It uses flat looking shapes and CSS 3D animations. The site does not load any heavy 3D models or interactions.
The shop sells folding kits and paper crafts. Product cards shows technical diagrams. These cards show folding lines, steps, and difficulties.
Users can add them to a live cart. The cart runs on vanilla JavaScript. The item count updates instantly without a page refresh. Visitors can also check seat openings for in-person experience. The design uses light and cream paper colors with purple/indigo accents.
The CSS fold motion looks cool but took work. The shapes rotate along confusing angles at the start. When all parts folded at the exact same speed, it looked stiff and resembled a poor design. I had to delay the folding animations by a fraction of a second. That small but frustrating delay made the paper movement look premium and natural.😊
Back to feed
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