mirror of
https://github.com/zoo-apps/industries.git
synced 2026-11-02 03:00:18 +00:00
zooqueenandHanzo Dev
19905ecd56
Adds three home compositions sharing the same investor narrative: - / (canonical) — restored old composition with Hero + zoo composite, Ecosystem, ZooLabsNarrative, ServicesOverview, ResearchHighlights, Leadership, TrustedBy, Contact. Adds polished motion (Reveal, Parallax wrappers, scroll-linked Hero drift), softer brutalist reset (rounded utilities now opt-in), and a Zen5 rainbow-gradient top banner. - /homepage1 — backup of the previous / composition (noindex). - /homepage2 — 10-slide deck with snap-mandatory CSS scroll snap, side-rail slide indicator, alternating brand-color slide washes, CSS-3D AI-coin scene behind the Hero (Zen5 family + Cloud / Network spokes, perspective + per-coin float keyframes, light blur), network-mesh edges, Foundation + Leadership + Traction + Access slides, plus the AI-native market-cap composite with NVIDIA as public-market comparable. - /homepage3 — editorial 'Quarterly' variant with serif display, masthead, drop cap, ornamental dividers, chapter framing, and a colophon footer. Wax-seal red accent on a cream paper surface. Other changes: - Navbar: drop rounded floating pill in favour of sharp transparent bar with a sharp backdrop-blur strip + border-b-2 black on scroll. - TopBanner: animated rainbow gradient background (300% width, background-position keyframe, prefers-reduced-motion aware). - Leadership / TeamMemberCard: rounded-full avatars (override the brutalist global border-radius reset via data-circle). - Ecosystem strip: render JPGs at /public/ecosystem/*.jpg with emoji fallback only when an image is missing (bear, drought, lake, eagle, forest, whale). - TheStack: each layer card is now a click target to its live domain (zenlm.org, zoo.cloud, zoo.network, zoo.fund, zoo.vote). - public/: new /hero/zooimg.png, /ecosystem/*.jpg, /pe/*.png. - Reveal / Parallax / ParallaxDivider / ParallaxBackground / CoinScene / SlideIndicator / SlideParallax / NetworkAnimation primitives under components/. Co-authored-by: Hanzo Dev <[email protected]>
60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { motion, useReducedMotion } from "framer-motion";
|
|
import { ReactNode } from "react";
|
|
|
|
/**
|
|
* Scroll-triggered reveal — content fades + drifts up + scales in as it
|
|
* enters the viewport. Mirrors the timing curves used on Apple, Linear,
|
|
* Vercel: long-tail easeOutQuint, ~700 ms duration, modest distance.
|
|
*
|
|
* Use as a sibling-spacing primitive: each ``<Reveal delay={n*0.05}>``
|
|
* staggers smoothly without per-component scroll listeners. ``once``
|
|
* makes the animation play a single time (prevents re-firing on
|
|
* back-scroll, which feels twitchy).
|
|
*
|
|
* Honours ``prefers-reduced-motion`` — children render at the final state
|
|
* with no animation when the OS toggle is on.
|
|
*/
|
|
export function Reveal({
|
|
children,
|
|
delay = 0,
|
|
y = 28,
|
|
scale = 0.985,
|
|
duration = 0.7,
|
|
once = true,
|
|
className,
|
|
}: {
|
|
children: ReactNode;
|
|
/** Seconds of head-start before this element animates — useful for stagger. */
|
|
delay?: number;
|
|
/** Starting Y offset in px (positive = comes from below). */
|
|
y?: number;
|
|
/** Starting scale. 1 disables the scale-in. */
|
|
scale?: number;
|
|
duration?: number;
|
|
once?: boolean;
|
|
className?: string;
|
|
}) {
|
|
const reduce = useReducedMotion();
|
|
if (reduce) {
|
|
return <div className={className}>{children}</div>;
|
|
}
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y, scale }}
|
|
whileInView={{ opacity: 1, y: 0, scale: 1 }}
|
|
viewport={{ once, margin: "0px 0px -12% 0px" }}
|
|
transition={{
|
|
duration,
|
|
delay,
|
|
// easeOutQuint — pro sites' favourite. Fast start, long tail.
|
|
ease: [0.22, 1, 0.36, 1],
|
|
}}
|
|
className={className}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
);
|
|
}
|