feat: add website-redesign marketing site candidate#1001
Draft
vivek7405 wants to merge 25 commits into
Draft
Conversation
A futuristic WebJs marketing homepage, ported from the remix-website clone experiment (#958) and fully rebranded to WebJs. It keeps the Three.js particle background, scroll-driven sections, section-nav, and the shrinking wordmark, all with no build step and progressive enhancement intact. The wordmark is a WebJs logotype set in Inter (embedded in the mask SVG so it renders in the isolated mask context), centered at natural proportions and lowered to group with the hero subtitle. All Remix branding, copy, nav, social links, and the code sample are WebJs. Runs on port 5010.
Replace the racetrack and racecar scenes with a cosmic set: a starfield flythrough over a magenta nebula (hero), an alien saucer, an astronaut, a ringed gas giant, and a galaxy. Every scene is generated procedurally from the particle index in the preset GLSL, so no point-cloud models are needed and the shader ids, camera lerp, and label projection stay unchanged. Also retint the mesh-gradient background pass to a nebula palette and remove the leftover Remix package badges (they carried baked-in Remix wordmarks and clashed with the theme). The floating scene labels stay: they line up with the WebJs section copy.
Shift the nebula background and every particle scene from the blue-violet cast to a warm amber-orange one: an ember-orange nebula core, gold and amber stars, a molten saucer, a warm-suited astronaut, an orange gas giant, and a gold-cored galaxy. Colour only; geometry and motion are unchanged. The previous blue-violet palette is one commit back if we want to compare.
This reverts commit 6fce136.
Establish the WebJs logo across the redesign and polish the landing: - Wordmark: the hero scroll wordmark is now the Velocity lockup, a forward-leaning W with a hairline slice flowing into italic "ebJs" so it reads as one word. Built as a mask SVG so the slice is real negative space; keeps the centre-to-corner shrink animation (ratio + clamp tuned). - Favicon: the Velocity W on a dark tile, as favicon.svg AND a rebuilt favicon.ico (the old Remix .ico served at /favicon.ico and overrode the SVG). Dropped the stale .ico <link> so the SVG is authoritative. - Footer: swapped the plain "WebJs" text for the same wordmark SVG. - Loader: replaced the runner image with the Velocity W whose strikethrough draws across live (pure SVG + CSS, no asset; respects reduced motion). - Copy: hero headline to "A web framework for the AI era"; head title to "WebJs - A web framework for the AI era". - Removed the floating 3D scene labels (FRONTEND / BACKEND / etc.) from the particle presets. The engine's performance path is untouched (same particle budget and post-processing as before). Brand-exploration scratch (third-party logos, commercial font) is gitignored, kept local.
Replace the borrowed hero sub-copy with benefit-focused, non-technical lines that complement the 'A web framework for the AI era' headline, and move the install command onto its own line as a <copy-cmd> click-to-copy chip (light-DOM, progressive-enhancement safe).
Port the source site's top fade gradient (topFadeGradientStyles) as a fixed .rmx-content::before at z-20, above page content but below the scroll-logo (z-25) and nav (z-30). Darkens the top band so the corner logo and menu chips stay legible over scrolling content, with a lighter mobile variant.
Follow the false-colour convention: dense clumps ignite warm (white-gold into amber) while low-density filaments stay cool (violet, cobalt, indigo) and voids go black. Add a warm ignited node to the background nebula palette and saturate the galaxy core toward white-hot at centre.
Replace the starfield flythrough with a procedural 3D large-scale structure: dense warm nodes (white-gold at centre) sitting at the ends of cool violet-to-magenta filament threads, connected node-to-nearest- neighbour so the threads branch into a web, with faint dust in the voids. Sweep filament hue the long way round the wheel (violet -> H-alpha pink -> gold) so it never passes through green. Dim the background pass to a faint dark backdrop so the particle web carries the structure.
Cluster nodes into superclusters with large voids between (hierarchical large-scale structure, not a uniform spread); string galaxy beads along the filaments; bow the threads gently so they curve; and add a volumetric depth haze that dims the far side of the volume. Raise node and cluster counts and rebalance luminance so the web fills the frame at any rotation.
Match the real dark-matter composite: the background pass carries the coloured glow (blue-violet clumps on the clusters, a magenta/pink diffuse bridge through the centre, black voids), while every particle is now a white/gold/blue GALAXY point, densest on the clusters and strung along the filaments, with a scattered background-galaxy field filling the frame. Density (not hue) marks the structure, as in the real image.
Roll the engine back to the first cosmic-web attempt: warm nodes with violet-to-magenta filament threads through the centre over a dim dark backdrop. Drops the later realism-clustering pass and the JWST blue/ magenta recolour, per preference for the violet/pink centre.
Re-apply the JWST Abell 2744 calibration: background dark-matter glow (blue-violet clumps + a concentrated magenta/pink centre bridge) with white/gold galaxy particles on top. This is the concentrated violet/pink centre look, preferred over both the filament-thread version and the darker realism-clustering pass.
Roll the hero back to the smooth nebula: a violet field with a concentrated warm-gold/pink glow behind the wordmark and a fine starfield, no discrete web nodes or filament threads. Preferred over the particle-web and JWST-glow attempts.
The concentrated core read as a light, near-white pink because the centre was a bright white-gold blob. Drop that blob's dominance to a small warm highlight and lead with a deep rose-magenta core glow, so the centre matches the darker, more saturated magenta of the JWST reference.
- Clear the scroll-logo wordmark correctly: the ported Remix padding-top baked in Remix's thin 440:43 mark at top 92px, so our taller 760:170 mark at top 170px overlapped the title below ~1300px wide (mobile and tablet). Compute padding-top from our wordmark's real geometry. - Add a mobile nav menu: a native <details> that toggles without JS (the page never hydrates), shown <=720px in place of the overflowing desktop chip row. - Center the hero (logo, title, subtitle) on mobile instead of left-aligning, and drop the forced line break so the sub-copy flows continuously on every viewport.
Keep the field mostly pale-white, but recolour a small slice (~7%) of the stars along the baryonic-gas temperature scale for realism, matching the reference: the hottest, densest gas reads bright white-gold, warm-hot filament gas orange-red, cold void gas blue-violet. Driven by an independent per-star hash so it stays a clean minority.
Widen the tinted bins from ~7% to ~25% of the stars so the gas-colour variety reads clearly while the field stays majority white: ~2% white-gold, ~7% orange-red, ~16% blue-violet.
Color-sample the JWST Abell 2744 dark-matter composite and set each blob hue to the measured region mean: central purple-magenta (#9f1e9e, not the prior warm rose), blue-violet flanking clumps (#7149df / #4b42b1), magenta-purple pocket, near-black voids. Positions, sizes, and gains unchanged. The un-physical warm-cream highlight becomes light magenta; Oklab chroma scaling preserves hue, so on-screen hues match the samples.
Roll back the image-sampled palette; the measured purple-magenta and blue-violet read worse than the deepened rose-magenta version, which is the preferred look.
Widen the cold-void blue-violet bin (tcol > 0.650) so ~35% of stars are temperature-tinted while the field stays majority white: ~2% white-gold, ~7% orange-red, ~26% blue-violet.
Widen all three temperature bins (not just blue-violet) so the colour variety is richer while the field stays majority white: ~4% white-gold, ~12% orange-red, ~29% blue-violet.
Narrow all three temperature bins so the field is overwhelmingly white with only a sprinkle of colour: ~1% white-gold, ~3% orange-red, ~6% blue-violet.
Widen all three temperature bins from ~10% to ~15% total: ~1.5% white-gold, ~4.5% orange-red, ~9% blue-violet.
Return all three temperature bins to ~10% total: ~1% white-gold, ~3% orange-red, ~6% blue-violet.
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.
Closes #1000
New monorepo app
website-redesign/: a futuristic WebJs marketing homepage, ported from the remix-website clone experiment (#958) and rebranded to WebJs. It is a candidate direction for the WebJs site redesign.What is here
npx webjs createcommand..webjs/vendor/importmap.json(no bundler).Status
Draft, opened for tracking and live iteration. Runs locally on port 5010.
Known remaining Remix-shaped assets (not text, need new artwork)
remix-runner.*) is unchanged (alt text is WebJs).Test plan
webjs checkpasses/; served HTML matches the clone structurallyworkspaces+ sync lockfile before ready-for-review