feat(website): hero 360 turntable, one-shot demo, industries section - #14494
Open
marawan206 wants to merge 76 commits into
Open
feat(website): hero 360 turntable, one-shot demo, industries section#14494marawan206 wants to merge 76 commits into
marawan206 wants to merge 76 commits into
Conversation
Replace the landing hero with an interactive recreation of a real ComfyUI workflow (Load Image → Qwen Multiangle Camera → Image Edit → Save Image). Nodes are draggable and collapsible; the camera node is a vendored Three.js scene whose pose drives sliders, preset dropdowns, and the live prompt string. Pressing Run resolves the current pose to a pre-rendered output — no inference backend. three.js and the camera widget are dynamically imported and hydrate only on scroll + idle, so the landing route no longer ships three.js eagerly (the old hero pulled it in via useHeroLogo). Camera engine vendored from jtydhr88/ComfyUI-qwenmultiangle (MIT); see src/components/hero/camera/ATTRIBUTION.md.
Rework the hero from a full four-node graph into the simplified Figma flow: an input image card, a compact "3D ANGLE" node, and an OUTPUT image card joined by yellow links. The camera scene is recoloured to a white / grey / yellow palette (added via a `palette` option on the vendored widget). Output updates live as the camera moves — the Run button and the Image Edit / Save nodes (and the seed widget) are gone. The live prompt renders as yellow highlighter word-chips below the flow.
Add the yellow bezel border on the 3D ANGLE node, raise the inner-panel contrast, brighten the node label, and give the prompt word-chips the skewed highlighter-marker treatment from the design.
Replace the live prompt words below the flow with the site headline
("Professional Control of Visual AI") rendered in the same skewed
highlighter-chip treatment, restoring a visible h1. The camera pose
still drives the 3D scene and output image live.
Reuse the existing NodeBadge component so the headline matches the site's interlocking yellow-pill treatment (as used by the "HOW Comfy WORKS" section) instead of a bespoke chip style.
Match the Figma: swap the 3D ANGLE node's yellow bezel for a neutral dark border with a lighter inset scene panel, and align the image cards to the same corner radius and border. Restyle the OUTPUT pill as the dark-plum rounded rectangle from the design.
Give the 3D ANGLE node a proper header strip — label and port dots inside the node's top band, scene panel inset below — and move the link anchors onto the header dots. Render the headline as one tilted highlighter pill per line, tightly stacked, per the design.
Recreate the connected two-pill headline: yellow rounded pills fused by a small bridge through an SVG goo filter (blur + alpha contrast), with crisp text layered on top. The bridge is static — no glide animation.
…ards Place the goo headline at the top of the hero. Rework the connectors to match the design reference: endpoints are dots drawn inside the cards (input card interior, OUTPUT pill), wires render above the cards and cross their edges, with endpoint dots drawn by the links layer.
End the output wire on the OUTPUT pill's own dot instead of drawing a near-duplicate endpoint, raise the input anchor to the same height as the output pill, and set draggable=false on card images so grabbing them moves the node rather than ghost-dragging the image.
Rearrange the hero per the design mock: small input card top-left, the goo headline overlaid top-center inside the scaling canvas, the 3D ANGLE node full-size lower-centre, and a large output card that bleeds off the right edge of the viewport while staying draggable. Headline sizing is now em-relative so it scales with the canvas; drag clamps allow cards to sit partially outside the canvas with a reachable margin.
Add 11 new pre-rendered poses (full left-side ring across low/eye/high elevations, right-side eye-level, front and back close-ups) and refresh the back-view medium render, growing the resolver's asset set from 5 to 16 so dragging the camera lands on real renders far more often.
Add a COLOR node between the 3D ANGLE node and the output: a draggable hue ring plus a saturation slider that apply a CSS hue-rotate/saturate filter to the output image in real time, recolouring the render's neon without any new assets. Wires it in as 3D ANGLE -> COLOR -> OUTPUT.
…dots Replace the hue ring with two quiet gradient sliders (hue spectrum and a saturation track that follows the current hue), no numeric readouts. Wire splines now end exactly on the nodes' own dots: port constants match the header dot centres and the links layer only draws a dot where no DOM dot exists (the input card), removing the doubled dots.
Restore slider/button exclusions in the node-drag guard so pointer drags on a slider track scrub the value instead of moving the node.
Swap in the corrected renders: a denser eye-level medium ring (front, both front quarters, both sides, back, back-left quarter), refreshed high-angle poses for front/back/left/right, and keep the low-angle trio. The set is now 14 consistent poses.
Make the zoom handle drag relative to its grab point (no jump) and add oversized invisible hit targets for all three camera handles. Slant the headline pills per the design. Render wires beneath nodes so they dip under elements they cross, with every endpoint's dot drawn by its own element (input card dot restored as DOM).
The node-left/right cap SVGs were intrinsically 94.14 tall while node-union is 95.23; replaced flex items never stretch, so the yellow segments stood ~1px taller than the caps and poked out below the badge. Scale the caps to the same intrinsic height.
Project the pointer ray onto the centre-to-camera line, subtract the grab offset, and invert the handle-position curve, so the zoom handle tracks the pointer along its visible direction at every azimuth instead of upstream's vertical-only mapping that inverted direction and jumped on grab.
Replace the static mobile fallback with the full pipeline as a vertical stack (input, touch-driven 3D ANGLE node, COLOR sliders, live OUTPUT), sharing the pose/colour state logic with the desktop graph via a composable. Below md the headline renders as solid skewed pills — the goo filter's fixed-pixel blur turned small pills to mush.
Add the front-view eye-level close-up and wide-shot renders so the zoom axis resolves real assets across its whole range on the default view. On mobile, drop the input card and lead with the 3D ANGLE node followed directly by the OUTPUT, with the colour sliders after.
Rebuild the headline from the node-pill cap geometry used across the rest of the site, replacing the goo-filter approximation. Real geometry scales cleanly, so this also drops the separate below-md rendering path the device-pixel blur required. Apply the node label type spec and resize the slider thumbs to sit flush with their tracks. Drive the camera pose and colour grade after three seconds without input so the interaction is discoverable. Motion resumes from wherever the visitor left the pose, runs only while the graph is on screen so the desktop and mobile copies never animate at once, and is disabled under prefers-reduced-motion. Enlarge the camera gizmo, thin its strokes, and swap the output image immediately instead of cross-fading.
Render the subject as a plain grey card and enable the inner base ring, so the widget reads as a camera diagram rather than a thumbnail preview. The ring already existed in the vendored widget and was only switched off by the palette, so no new geometry was needed.
Place the primary CTA under the headline in both the desktop graph overlay and the mobile flow, pointing at the same cloud destination as the header's primary button. The desktop overlay is pointer-events-none so drags reach the graph nodes beneath it, so the button opts back in explicitly.
Add ten renders: the full eight-azimuth elevated medium ring, plus the two azimuths missing from the eye-level medium ring. The elevated band previously shipped nothing at all, so every pose between 15 and 45 degrees snapped to a neighbouring elevation — about a quarter of the idle self-demo's travel. Both medium rings are now complete, which also means no azimuth bucket is empty and the resolver's circular snapping is no longer reachable; the two tests that asserted that fallback now cover the exact-resolution and same-azimuth degradation that replaced it.
…raph-bert # Conflicts: # apps/website/src/components/home/HeroSection.vue
Carry the intent of #14250 (hero CTA -> cloudCta with UTM content) into the new hero graph's Get started buttons after merging main. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
…omfy-Org/ComfyUI_frontend into feat/comfy-org-hero-graph-bert
Move the 3D ANGLE and COLOR nodes up under the headline and reposition the Get started for free button beneath them at the bottom of the canvas. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
imick-io
reviewed
Aug 10, 2026
imick-io
reviewed
Aug 10, 2026
Collaborator
|
The
Both tests will fail on every run until the spec is updated to the new page composition. While you're in there, could you also add equivalent smoke tests for the new sections (ModelRelease, FeaturedWorkflows, Industries)? The sections being removed had coverage, and it would be good for their replacements to keep that. |
imick-io
reviewed
Aug 11, 2026
imick-io
reviewed
Aug 11, 2026
imick-io
reviewed
Aug 11, 2026
imick-io
reviewed
Aug 11, 2026
imick-io
reviewed
Aug 11, 2026
- ProductShowcaseSection: render VideoMaskScene on mobile, drop dead video plumbing - Extract useAutoAdvance composable; share it between Industries and FeaturedWorkflows - FeaturedWorkflowsSection: play/pause slide videos on advance and visibility - VideoMaskScene: template-rendered scenes, dedup in-flight load, retry on failure - LottieScene: lottie-web AnimationItem type, same load guard, unmount race fix - ModelReleaseSection: MiniMax CTA via routes config (/minimax-h3, mirrors main) - Disable hero node pointer interactions under prefers-reduced-motion - e2e: replace removed-section smoke tests, cover new sections, stub hub assets
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
Contributor
Author
|
I have read and agree to the Contributor License Agreement |
comfy-legal
added a commit
to Comfy-Org/comfy-cla
that referenced
this pull request
Aug 13, 2026
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
marawan206
changed the base branch from
feat/comfy-org-hero-graph-bert
to
main
August 13, 2026 22:07
marawan206
dismissed
coderabbitai[bot]’s stale review
August 13, 2026 22:07
The base branch was changed.
christian-byrne
left a comment
christian-byrne
left a comment
Contributor
There was a problem hiding this comment.
There are some merge conflicts.
github-actions
Bot
added
the
risk:R3
Contributor
Author
|
Merge conflicts resolved @christian-byrne |
Collaborator
|
binary-size check is failing — could you move these five clips to GCP and serve them from the CDN?
|
This comment has been minimized.
This comment has been minimized.
imick-io
self-requested a review
August 19, 2026 23:09
imick-io
approved these changes
Aug 19, 2026
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
4 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
Real 16-frame 360° turntable for the hero pipeline, a one-shot idle demo, and the new Industries section replacing the showcase/use-case sections on the homepage.
Changes
Review Focus