feat(ui): Leseerlebnis fuer Wissen und rechtliche Seiten
- Artikel: Lesefortschritt als feine Honiglinie am oberen Rand, Initiale in Serifenschrift und Honig, groesserer Titel, angenehme Zeilenlaenge - Wissen-Uebersicht und "Weitere Artikel" als ruhige Liste mit grossen Serifen-Titeln, Unterstrich und gezeichnetem Pfeil statt "→" - Rechtliche Seiten mit klarerer Ueberschriften-Hierarchie Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>
This commit is contained in:
1 parent
e75392c75b
commit
dfda94ddfc
4 files changed
+62
-17
No files matched your search
@@ -0,0 +1,21 @@
|
||||
"use client";
|
||||
|
||||
import { motion, useScroll, useSpring } from "motion/react";
|
||||
|
||||
/**
|
||||
* Feine Honiglinie am oberen Rand, die sich beim Lesen eines Artikels
|
||||
* fuellt — zeigt, wie weit man ist, ohne vom Text abzulenken. Rein
|
||||
* dekorativ fuer Sehende; die Seite bleibt ohne sie vollstaendig lesbar.
|
||||
*/
|
||||
export function ReadingProgress() {
|
||||
const { scrollYProgress } = useScroll();
|
||||
const scaleX = useSpring(scrollYProgress, { stiffness: 140, damping: 26, mass: 0.4 });
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
aria-hidden="true"
|
||||
style={{ scaleX }}
|
||||
className="fixed inset-x-0 top-0 z-[55] h-[3px] origin-left bg-gradient-to-r from-honey-dark to-honey"
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user