Skip to content
F Fastry
Tag

#ux

6 posts tagged "ux".

The Stack Marquee — A Pure-CSS Infinite Tech Strip

Fastry's homepage has a new Stack Marquee: two rows of tech-stack cards scrolling opposite ways with zero JavaScript. Here's how the loop works and why it's hidden on phones.

H Hans Martens
2 min read
astro-rocket animation css components ux performance

System, Light, Dark — How Fastry's Colour-Mode System Works

A 3-state colour-mode system with no flash, live OS-preference tracking, and a pill dropdown that respects what the user actually picked. Here is how it is built.

A Almaz
2 min read
astro-rocket dark-mode design-system ux tutorial

Animations in Fastry — How the Premium Motion Design Works

A deep dive into every animation layer in Fastry: the spring-curve hero entrance, staggered cascades, scroll-reveal, and how it all stays smooth without a JS animation library.

A Almaz
2 min read
astro-rocket animation css ux performance

Hero Scroll Indicator — Desktop-Only, Hides on Scroll

Fastry's hero has an animated scroll indicator: two bouncing chevrons that fade in after the hero animation and disappear the moment you start scrolling. Here's how every part of it works.

A Almaz
2 min read
astro-rocket features ux animation

Scroll Progress Ring — A Circular Indicator on the Back-to-Top Button

Fastry's back-to-top button now has a circular SVG progress ring that fills as you scroll. It's brand-coloured, theme-aware, and runs entirely in CSS and a small inline script.

A Almaz
2 min read
astro-rocket features ux animation

Scroll Progress Bar — Reading Progress at a Glance

Fastry now has a scroll progress bar: a thin brand-coloured line that fills as you scroll. Here's how it works, where it lives, and how to enable it on any page.

A Almaz
2 min read
astro-rocket features header ux