How jasonbunod-oss/potato works
This is a browser-based potato storefront built around a scroll-driven animated landing page. A visitor scrolls through the story: scroll position maps to an animation frame, which drives image display and timed text/particle effects; the same page presents products that can be added to and adjusted in a client-side cart. The sampled source shows animation and cart logic in one script, with the page and styling in separate files. No README or backend is present in the supplied evidence, so checkout or order submission is not represented.
Main entry points: script.js Scroll mapping · index.html Page structure · frames Animation frames · style.css Page styling
Components 14
Animated story
- Scroll mapping
script.js - Frame preloader
script.js - Animation frames
frames - Frame display
script.js - Text phases
script.js - Particle effects
script.js
Storefront and cart
- Product catalog
script.js - Product grid
script.js - Cart state
script.js - Cart rendering
script.js - Cart controls
script.js
Page presentation
- Page structure
index.html - Page styling
style.css
Other components
- Visitor
Connections 17
- Visitor → Scroll mapping: scrolls
- Scroll mapping → Frame preloader: preload around
- Frame preloader → Animation frames: loads frames
- Scroll mapping → Frame display: selects frame
- Frame display → Animation frames: displays
- Scroll mapping → Text phases: updates phases
- Scroll mapping → Particle effects: updates effects
- Product catalog → Product grid: renders products
- Visitor → Product grid: views products
- Product grid → Cart state: add item
- Visitor → Cart controls: uses controls
- Cart controls → Cart state: changes quantity
- Cart state → Cart rendering: renders cart
- Page structure → Scroll mapping: provides elements
- Page structure → Product grid: provides container
- Page structure → Cart controls: provides controls
- Page styling → Page structure: styles page