Capture the actual page
Review the rendered desktop and mobile homepage, its typography, media, navigation, and dialog states.
INDEPENDENT REPRODUCTION STUDY
ForgeGUI
Material &
Motion
A close study of cinematic game scenes, quiet glass surfaces, and tactile blue actions. Public source copy, fonts, and media are preserved; homepage interactions are rebuilt locally. Independent study. Not affiliated with ForgeGUI. View ForgeGUI source ↗
ACTUAL REPLICA · CASE 011OPEN REPLICA ↗01
PRODUCT MODEL
WHY IT EXISTSSTARTING PROBLEM
A polished video homepage is easy to remember as an image and harder to understand as a repeatable hierarchy of materials, type, and behavior.
PRODUCT PROMISE
Rebuild the visible homepage closely, then isolate the decisions that make one action stand out inside a rich visual scene.
A runnable frontend specimen, preserved source assets, measured responsive layout, and an exercise for applying the same hierarchy to an original product.Keep the visual evidence
Preserve public styles and assets while rebuilding menu, dialog, disclosure, and motion behavior in readable JavaScript.
Measure across widths
Compare section heights and heading metrics at five widths, then inspect overflow and real interaction states.
Extract material hierarchy
Separate world-building video, quiet information surfaces, and the brighter primary action into reusable roles.
02
STYLE DNA
VISUAL + BEHAVIORAL RULESShow the creative world
A looping game scene establishes the audience and mood. The dark overlay lets the central promise remain readable as the frame changes.
Brightness signals priority
Secondary glass stays neutral. Blue gradients, an inner highlight, a dark lower edge, and shadow give the main action a stronger physical presence.
Three roles, one hierarchy
Instrument Serif carries the promise, Inter Tight handles practical text, and Cal Sans emphasizes the audience without adding another color system.
Move from scene to choice
The page moves from an expansive hero into tool cards, a dense suite, catalog media, plans, and a final invitation.
Carry the material into states
Menus, dialog panels, input fields, and button feedback reuse the same glass and highlight language as the homepage.
Rebuild one button first
Disable its gradient, inner highlight, and outer shadow. Restore each layer, then apply a quieter version of the same variables to a card.
03
SOURCE & PROMPT
ORIGINAL + DISTILLEDREUSE CONTRACTStudy the layers.
Study the layers.
Reuse the decisions.
The original input asks for a close reproduction. The reusable prompt turns the observed hierarchy into a separate exercise using an original brand and assets.
DOCUMENTED V0.1BLIND REPRODUCTION PENDING
The specimen and observed decisions are documented. This prompt has not generated a second implementation without access to the current study.
ForgeGUI homepage reproduction brief
The rendered homepage and its public visual assets form the reference. The task is frontend-only; preserved source product claims are not independent endorsements.
- Eight main sections
- Five responsive widths
- Original public media and fonts
- Native frontend interactions
- No account or generation backend
OWNER REQUEST — 2026-09-07
Reproduce https://forgegui.com/ as closely as possible for learning: page effects, loading behavior, fonts, assets, copy, frontend interactions, and mobile adaptation. Backend product functions are out of scope. Explain one useful design lesson.
SOURCE OBSERVED
- Full-width looping game scene, dark readability overlay
- Instrument Serif promises, Inter Tight interface, Cal Sans emphasis
- Neutral glass cards and blue dimensional actions
- Three core tools, suite grid, stock catalog, plans, closing video, FAQ
- Desktop dropdowns, mobile accordion navigation, account dialogs
REPRODUCTION BOUNDARY
Keep public source copy, media, fonts, styles, SVGs, and breakpoints.
Rebuild homepage interactions with local JavaScript.
Do not connect account, payment, generation, or source analytics APIs.
Preserved source claims are page copy, not independently verified facts.Productized design instructions
Written after the working product was built, then organized into goal, visual language, layout, interaction, motion, accessibility, use cases, and limits.
Build a cinematic homepage for a game-creation product with an original brand, original copy, and your own assets.
Product goal: let a game creator recognize the creative world immediately, discover the tool range, and find a clear next action.
Composition: use a full-width looping game scene behind a centered promise. Follow with three large tool cards, a denser suite grid, a horizontal stock catalog, a creator statement, two plan cards, a closing video action, and seven FAQ rows.
Typography: assign expressive serif type to promises, a tight sans to navigation and explanations, and a heavier rounded sans to one emphasized word. Keep the roles consistent across sections.
Material: darken the video behind copy. Make secondary glass surfaces neutral and low contrast. Reserve blue gradients, inner highlights, a dark lower edge, and a soft outer shadow for primary actions. Reuse the same material variables in buttons, cards, navigation, and dialogs.
Interaction: implement mutually exclusive desktop menus, outside-click and Escape dismissal, a compact mobile accordion menu, signup/login/reset-password dialog states, password visibility, local validation, focus trapping and restoration, smooth section links, and native FAQ disclosure. Keep demo submissions local.
Motion: loop the background scene and logo strip. Load lower videos near the viewport, pause them offscreen, and respect reduced motion. Keep animated screenshots distinct from static layout comparisons.
Responsive behavior: test 320, 390, 768, 1024, and 1440px widths. Stack tool and pricing cards, retain tap targets, let long dialogs scroll, and prevent horizontal document overflow.
Delivery: self-host fonts and media; separate the specimen from the collection shell so typography and global CSS cannot leak. Provide a source note, asset provenance, measurements, and explicit limitations.
Avoid: indistinguishable bright surfaces, illegible text over video, decorative blur on every element, fake social proof, source branding in an original product, and performance claims without matched measurements.Copy, assets, and visual rules
Original public CSS, fonts, video, images, SVGs, wording, and breakpoints preserve the source page's appearance.
Local frontend behavior
Readable JavaScript implements navigation, dialog transitions, local validation, focus handling, FAQ disclosure, and video lifecycle.
A transferable exercise
The prompt describes material, type, motion, and responsive roles for an original product. Source identity belongs to the attributed specimen.
04
WHEN TO USE
FIT + LIMITSUse it for
- Learning dimensional button and glass treatments
- Cinematic game-tool or creator-product homepages
- Studying three complementary typography roles
- Responsive reconstruction and state comparison
- Turning a visual reference into explicit design rules
Avoid it for
- Dense operational dashboards
- Placing bright glass on every surface
- Treating the specimen as a working AI product
- Claiming identical production speed from local timings
- Using preserved source claims as verified evidence
05
EVIDENCE & REUSE
STATUS + PROVENANCERESPONSIVE LAYOUT5 WIDTHS CHECKED
SECTION HEIGHT DELTA0 CSS PX · 8 SECTIONS
SOURCE ASSET MANIFEST25 CHECKSUMS
PRODUCTION SPEED PARITYNOT MEASURED
BLIND PROMPT TESTPENDING
SOURCE NOTE
Source: forgegui.com ↗, captured on 2026-09-07. Independent study. Not affiliated with ForgeGUI. Source media, marks, copy, and styles are included for this attributed study. Eight section heights and primary heading metrics matched at 320, 390, 768, 1024, and 1440px; animated frames were not compared pixel by pixel. Source claims remain unverified page copy.
REUSE BOUNDARYReuse the material hierarchy, type roles, motion lifecycle, responsive behavior, and documented prompt in an original product. Preserve source attribution when discussing this specimen. The replica has local-only form feedback and no account, payment, or generation service.