feat(web): hero constellation + 3D card tilt + scroll bar + cycling ProductHero - #8
Merged
Merged
Conversation
Hero: stats now count up from 0 when they enter the viewport (using motion animate), and six product glyphs float gently in the background as a constellation backdrop (respects prefers-reduced-motion). ProjectGrid: each card gains a perspective tilt that follows the cursor (useSpring-smoothed), snapping back on mouse-leave. The hover y-lift moves to a motion whileHover so transforms compose cleanly. https://claude.ai/code/session_01D2raHvxTxUpokiB7nLZnP9
Adds a 2px brand-gradient progress bar fixed to the top of every page that fills left-to-right as the user scrolls (useScroll + scaleX). ShellSection ProductHero now cycles through all nine products on a 3.2s interval with AnimatePresence cross-fade. Manual dot-indicator lets visitors jump to any product. Respects prefers-reduced-motion. https://claude.ai/code/session_01D2raHvxTxUpokiB7nLZnP9
AnimatedSection: a thin "use client" motion.section wrapper that whileInView-animates any server-rendered content into the viewport. Used on product page about, features grid, and CTA sections so every scroll stop on /products/[slug] has a smooth entrance. ComplianceSection: RiskRing now cycles through three audit-scan scenarios every 6 s (EU AI Act / NIST / OWASP). Marked live: true in DesignPreview so all five showcase sections now show the live dot. https://claude.ai/code/session_01D2raHvxTxUpokiB7nLZnP9
globals.css: adds text-konjo-gradient-flow — a 6 s looping gradient animation on the hero KonjoAI heading (brand-soft → brand → accent → brand → brand-soft, 220% background-size). Respects prefers-reduced- motion by freezing at position 0. DesignPreview: header eyebrow now reads "all live" since the Compliance section gained live cycling in the previous commit; description updated to mention five live sections and nine products. https://claude.ai/code/session_01D2raHvxTxUpokiB7nLZnP9
Adds a violet glow (1px border highlight + 40px soft outer glow) that animates in on hover alongside the existing 3D tilt and y-lift. The shadow interpolates back to none on mouse-leave. Disabled when prefers-reduced-motion is set. https://claude.ai/code/session_01D2raHvxTxUpokiB7nLZnP9
Adds a RecentEvents server component — a glassmorphism event log listing the last 6 portfolio events (deploys, recoveries, incidents) with severity- colored icon badges and relative timestamps. Positioned between the live dashboard and the product endpoint list, completing the monitoring story. https://claude.ai/code/session_01D2raHvxTxUpokiB7nLZnP9
Adds a "More from KonjoAI" section at the bottom of each product page showing the next 3 products (wrapping) with glyph, name, tagline, live metric, and StatusBadge. Server-rendered, fully static, creates a browse loop through the constellation. https://claude.ai/code/session_01D2raHvxTxUpokiB7nLZnP9
ProjectGrid: section header (h2 + subtitle + counter) now animates in with whileInView as a unit, matching the DesignPreview header treatment. Footer: adds a Products link, a live "7 / 9 systems operational" stat line that reads from PRODUCTS at build time and highlights the operational count in konjo-good green. https://claude.ai/code/session_01D2raHvxTxUpokiB7nLZnP9
Swapped Article 9/13/17/Annex IV content (identical to App.tsx) for Article 10/11/14/15 with unique labels and cell details — eliminates the DRY violation detected by the G4 CI gate. https://claude.ai/code/session_01D2raHvxTxUpokiB7nLZnP9
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
motion.animate+useInViewuseMotionValue+useSpring), snapping back on mouse-leave; y-lift moves from CSS towhileHoverso transforms compose cleanly; both effects respectprefers-reduced-motionuseScroll+scaleXAnimatePresencecross-fade; dot-indicator lets visitors jump to any product; reduced-motion awareTest plan
prefers-reduced-motiondisables tilt, lift, glyphs, cross-fadenpm run typecheck,npm test,npm run buildall greenhttps://claude.ai/code/session_01D2raHvxTxUpokiB7nLZnP9
Generated by Claude Code