Tighten Impressum text blocks and drop Reveal's y-translate jump
AnbieterAngaben.tsx's address/VAT/register blocks each got the same gap-4 as the section headings, so related lines (e.g. name/street/zip+ city) read as visually disconnected paragraphs instead of one block — wrapped each in its own gap-1 container, keeping gap-4 only between sections. Reveal.tsx's shared fadeUp variant animated opacity and a 28px y- translate together, which read as the whole section hopping into place on top of the fade. Renamed to fadeIn, opacity only — applies site-wide via Reveal/RevealGroup/RevealItem. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -3,9 +3,14 @@
|
||||
import { motion, type Variants } from "motion/react";
|
||||
import type { CSSProperties, ReactNode } from "react";
|
||||
|
||||
const fadeUp: Variants = {
|
||||
hidden: { opacity: 0, y: 28 },
|
||||
show: { opacity: 1, y: 0, transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] } },
|
||||
// Plain fade, no y-translate — fixed 2026-07-24. Used to animate opacity
|
||||
// 0→1 *and* y 28→0 together ("fade up"), which read as the whole section
|
||||
// visibly hopping/jumping into place on top of the fade — one motion cue
|
||||
// too many. The fade alone is already a clear enough "this just appeared"
|
||||
// signal without the extra jump.
|
||||
const fadeIn: Variants = {
|
||||
hidden: { opacity: 0 },
|
||||
show: { opacity: 1, transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] } },
|
||||
};
|
||||
|
||||
type RevealProps = {
|
||||
@@ -16,7 +21,7 @@ type RevealProps = {
|
||||
delay?: number;
|
||||
};
|
||||
|
||||
/** Fades a section up into place once, the first time it scrolls into view. */
|
||||
/** Fades a section into view once, the first time it scrolls into view. */
|
||||
export function Reveal({ children, className, style, delay = 0 }: RevealProps) {
|
||||
return (
|
||||
<motion.div
|
||||
@@ -25,7 +30,7 @@ export function Reveal({ children, className, style, delay = 0 }: RevealProps) {
|
||||
initial="hidden"
|
||||
whileInView="show"
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
variants={fadeUp}
|
||||
variants={fadeIn}
|
||||
transition={{ delay }}
|
||||
>
|
||||
{children}
|
||||
@@ -53,10 +58,10 @@ export function RevealGroup({ children, className }: { children: ReactNode; clas
|
||||
);
|
||||
}
|
||||
|
||||
/** Child item for use inside a RevealGroup — same fade-up motion, driven by the parent's stagger. */
|
||||
/** Child item for use inside a RevealGroup — same fade motion, driven by the parent's stagger. */
|
||||
export function RevealItem({ children, className }: { children: ReactNode; className?: string }) {
|
||||
return (
|
||||
<motion.div className={className} variants={fadeUp}>
|
||||
<motion.div className={className} variants={fadeIn}>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user