Hopsctch

I designed and built a lightweight pre‑loading animation for Hopsctch — a team I collaborate with — to introduce the brand the moment the page begins loading. The goal was to deliver something playful and precise that sets the tone for the experience without delaying content.

The final deliverable is an animated PNG (APNG) that plays instantly, preserves sharp typography and transparency, and requires no JavaScript to autoplay. From concept to delivery, the work was completed within one week, including storyboarding, motion design, export, and integration.

Create a brand pre‑loader that feels alive yet never slows the page. The animation needed to start instantly, look crisp on any background, and echo the brand’s playful, modular wordmark.

• Instant playback: no JS gating or video controls; must feel native to page load.
• Sharp type & transparency:maintain brand typography without compression artifacts.
• Small footprint: keep bytes low for first paint and on mobile networks.

Success meant a delightful motion cue that reinforces brand voice while keeping Core Web Vitals happy.

I started with quick motion studies of the logotype—letters pop in on a hop‑like cadence, stack, then settle into the wordmark. The motion is clean and readable, with just enough character to feel crafted rather than templated.

The animation ships as an APNG served from the static `/public` directory and rendered with a plain `img` tag for reliable autoplay during initial paint.

• Export: optimized frame count, palette reduction, and subtle dithering to keep edges crisp and size low.
• Integration: static asset path with responsive container; respects `prefers-reduced-motion` by gracefully skipping on systems that request less motion.
• Fallbacks: static poster frame for legacy contexts where APNG isn’t supported.

The pre‑loader adds a small, memorable beat of brand personality right at first paint. It improves perceived performance by giving a purposeful motion cue while content initializes.

Key Outcomes:

• Stronger brand presence during loading states
• Low‑overhead asset that respects performance budgets
• Simple integration path for future pages

Lessons Learned: APNG is a great fit for short, type‑driven animation with transparency. For longer pieces or complex vector motion, Lottie or lightweight video can be more efficient.

Expand usage across more surfaces, add subtle sound hooks for interactive moments, and explore a vector version for longer timelines where file size matters more than instant playback.