mirror of
https://github.com/zoo-apps/industries.git
synced 2026-10-30 14:57:03 +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]>
50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
"use client";
|
||
|
||
import { ReactNode, useRef } from "react";
|
||
import { motion, useScroll, useTransform, useReducedMotion } from "framer-motion";
|
||
|
||
/**
|
||
* Scroll-linked vertical parallax wrapper.
|
||
*
|
||
* As the wrapped section travels through the viewport its inner content is
|
||
* translated on Y, creating the parallax depth effect — without changing
|
||
* layout flow. The wrapper itself participates in the document like any
|
||
* other block; only ``translateY`` is animated, so neighbouring sections
|
||
* are unaffected.
|
||
*
|
||
* The default ``distance`` of 60 means: content sits at +60 px when the
|
||
* section first appears at the bottom of the viewport and at –60 px by the
|
||
* time the section exits the top. Adjust per section if a tile should
|
||
* scroll faster (front layer) or slower (back layer).
|
||
*
|
||
* ``useReducedMotion`` honours the OS-level prefers-reduced-motion setting
|
||
* — translation is short-circuited to zero when on, so the page is still
|
||
* usable for visitors who need motion suppressed.
|
||
*/
|
||
export function Parallax({
|
||
children,
|
||
distance = 60,
|
||
className,
|
||
}: {
|
||
children: ReactNode;
|
||
distance?: number;
|
||
className?: string;
|
||
}) {
|
||
const ref = useRef<HTMLDivElement | null>(null);
|
||
const reduce = useReducedMotion();
|
||
const { scrollYProgress } = useScroll({
|
||
target: ref,
|
||
offset: ["start end", "end start"],
|
||
});
|
||
const y = useTransform(
|
||
scrollYProgress,
|
||
[0, 1],
|
||
reduce ? [0, 0] : [distance, -distance],
|
||
);
|
||
return (
|
||
<motion.div ref={ref} style={{ y }} className={className}>
|
||
{children}
|
||
</motion.div>
|
||
);
|
||
}
|