chore: vendor web-clone skill (Jane-xiaoer/claude-skill-web-clone, MIT)#250
Open
khuepm wants to merge 7 commits into
Open
chore: vendor web-clone skill (Jane-xiaoer/claude-skill-web-clone, MIT)#250khuepm wants to merge 7 commits into
khuepm wants to merge 7 commits into
Conversation
Adds the web-clone methodology skill to .claude/skills so design-recon scripts (recon-site, dna-scaffold, visual-diff, ...) stay available. playwright-loader patched to honor HTTPS_PROXY.
Restyle the landing page with a warm editorial design language studied from oryzo.ai (learned, not cloned): warm-black #100904 background, cream #ffedd7 ink, totality-orange #e6500a accent, Archivo display + Literata serif + DM Mono labels, uppercase bracketed mono captions, dashed rules and numbered sections. New brand mark: a total solar eclipse with a tiny spaceship transiting the moon — shipped as logo-mark.svg and the EclipseMark/EclipsePhase components. Hero replaces the orbital solar system with an animated eclipse scene (breathing corona, rotating rays, diamond-ring flare, spaceship transit). OG image updated to match.
Rebuild the landing as scroll-driven scene transitions, following the choreography recon'd from oryzo.ai (fixed stage + scroll-ratio scenes), implemented with framer-motion scrub + Lenis smooth scroll instead of THREE/GSAP: - EclipseStage: fixed backdrop where scroll IS the eclipse — totality full-size in the hero, the stage shrinks to the top-right while the moon slides off through the product sections (light returns), then returns to centre for a second totality behind the final CTA. The tiny spaceship transits twice, scrubbed by scroll, and a mono FIG. caption swaps per scene. - Scene/WipeTitle/EclipsePhaseScrub: per-section scroll progress (the --active-ratio pattern) drives dashed-rule draw, clip-path title wipes, and each section's eclipse-phase glyph; feature grids get per-column parallax drift. - Lenis lerped scrolling wired through a context (header nav uses lenis.scrollTo), disabled under prefers-reduced-motion. - Reduced-motion fallback renders a dimmed static totality backdrop; hydration-safe via useStaticMotion.
…ng-rebrand-1iopdw # Conflicts: # apps/landing/package.json # apps/landing/src/components/Footer.tsx # pnpm-lock.yaml
The merge resolution took main's lockfile then re-ran install to add lenis, but the regenerated lockfile wasn't re-staged — CI's --frozen-lockfile install failed with ERR_PNPM_OUTDATED_LOCKFILE. Commit the updated lockfile so apps/landing's importer matches package.json (adds lenis@1.3.25).
Recolour the eclipse identity from a single warm-gold register to a prismatic cosmic aurora — violet, magenta, cyan and teal wrapping a warm-gold totality core. - Palette: deep aubergine/indigo nebula base, prismatic starfield and drifting colour clouds; accent ramp leads with violet, warm gold as the totality glint. Legacy var names remapped so cards/badges/dots inherit cosmic hues. - EclipseStage: layered nebula corona (violet→magenta→cyan) with prismatic rays; the aurora hue-rotates with scroll so each scene gets its own colour. Fixes a filter-containing-block bug that offset the corona from the moon. - Per-phase hues: each product section's eclipse-phase glyph and CTA dot carry a distinct hue (gold/rose/violet/cyan). - Prismatic gradient on the hero 'AI.' wordmark, the solid button, the logo mark, OG image and section visuals. Reduced-motion and mobile verified; no page errors.
Replace the flat dark backdrop with a colourful animated cosmic layer: - A multi-hue nebula floor on <html> — distinct violet / magenta / blue / teal colour zones so the page never reads as one monotone dark. Viewport-anchored (background-attachment: fixed on every layer) so it stays consistent at every scroll position. - <CosmicBackground>: six blurred colour clouds that slowly drift and pulse, a very slow rotating aurora sheen, and an occasional shooting star. Twinkling starfield. Pure CSS transform/opacity — composites on the GPU, freezes under prefers-reduced-motion. - Fix the root cause the old nebula never showed: body's opaque background was painting over the negative-z fixed layer. Moved the gradient to <html> and made body transparent. Cards keep their own dark surfaces so body text stays readable over the colour. Verified across hero/sections/FAQ/CTA, reduced-motion and no page errors.
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
1 participant
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.
Adds the web-clone methodology skill to .claude/skills so design-recon
scripts (recon-site, dna-scaffold, visual-diff, ...) stay available.
playwright-loader patched to honor HTTPS_PROXY.