- AnimatedNumber: stat tiles count up from 0 when scrolled into view
instead of appearing static, so "live numbers" actually feels live.
- Pull quote: the story's strongest line is pulled out into its own large
editorial-style callout between the hero paragraphs and the "Von Tier
zu Tier" section, giving the wall of text a visual beat. paragraph2
trimmed (DE+EN) so the line isn't read twice back to back.
- PawPrintTrail: a scattered trail of low-opacity paw prints behind the
story content, each "stamping" into place via a pure-CSS scroll-driven
animation (animation-timeline: view(), same technique as the existing
hero-parallax-icon on the landing page) — no JS, respects
prefers-reduced-motion.
Fixed a real bug while building the trail: -z-10 on its wrapper had no
local stacking context to be scoped to (the parent had `relative` but no
z-index), so it escaped past the page content and rendered behind the
document background — invisible regardless of opacity. Giving the page's
outer wrapper `z-0` fixes it.
Verified locally via dev server + Chrome DevTools MCP: light + dark theme,
375px mobile, quote/trail/stat-tile rendering all confirmed visually.
Rebuilds the public landing page per the structural reference in
Gitea #11 (navbar layout, rounded hero card with phone mockup +
floating badges, catchphrase section, second detail-feature card,
footer repeating the navbar) — colors/typography adapted to PawFeed's
existing orange brand instead of the generic SaaS reference palette.
New:
- Sticky navbar (logo, Home/About-coming-soon/Impressum, language
switcher, Login + Sign-up pill)
- Hero: rounded-4xl gradient card, phone-framed app preview with
three floating badge cards (idle bob animation), scroll-linked
parallax on the background paw watermark via native CSS
animation-timeline: view() (progressive enhancement, no JS)
- Catchphrase section reusing the existing 4 feature translations,
each card staggered into view via a new ScrollReveal client
component (IntersectionObserver, no scroll-handler churn)
- Second rounded detail-feature card with two checklist points
- Footer repeats the navbar links + tagline + "designed by" line
All reveal/parallax/float animations respect prefers-reduced-motion
and are pure CSS — no new animation dependency. Verified in a real
browser at 390px and ~1568px (mobile nav collapse, hero stacking,
floating badges hidden on mobile, scroll reveals firing correctly).
Gitea #11
Adds a CSS-only spring-scale + expanding-burst-overlay animation
triggered when a pet paw-reacts to a post, respecting
prefers-reduced-motion. Only plays on the like transition, not unlike.
Gitea #15
admin