DISCORD.DEAL — @ IDENTITY / NITRO DIRECTION
Reference study and implementation map · 17 October 2026

REFERENCE
https://discord.com/nitro
User recording: brave_fWk8eTmxOo.mp4, 22.17 seconds, 2558 × 1278, 30fps.
Local sequence: video-sequence-detailed.jpg. Exact-second frames: sequence-00.jpg through sequence-22.jpg.
Live captures: nitro-gear-loop-a.png / nitro-gear-loop-b.png.

WHAT THE REFERENCE ACTUALLY DOES
00–01s: A vivid violet/magenta hero establishes the world immediately. Italic display type provides energy; a plain white CTA is easy to identify.
02–04s: The page resolves into black. Large bounded surfaces contain the color rather than tinting every background.
05s: Gear and Orbs are independent, four-second, muted loops in rounded color stages. Both preserve recognizable object silhouettes; object rotation and light carry the motion.
06s: A short centered chapter introduction resets the reading rhythm.
07–10s: Alternating copy/art rows. One message, one demonstration. The video moves inside its stage; the heading stays stable.
11–16s: Detailed comparison is visually structured into categories and rows instead of long paragraphs.
17–18s: Questions are progressive disclosure. The end CTA returns to the saturated hero world.
19–22s: A clear footer closes the page. The entire recording travels through the site without a scroll trap.

OUR OWN SUBJECT AND IDENTITY
This is an independent Discord account/username marketplace. It is not Nitro and must not imply Discord endorsement.
The @ is the core recognizable shape. It replaces the borrowed human character and giant profile-card hero.
Create an original continuous @ silhouette: rounded open outer loop, compact inner counter, angled return/tail.
Deliver a monochrome vector mark, a color mark, and a dimensional mascot based on the SAME silhouette.
A small pair of inset lenses gives the dimensional @ personality. No walking limbs, costumes, meme slogans, generated film or ambiguous transformation.
Keep the symbol readable when reduced to a favicon. Mascot details must not be required to identify the mark.

DESIGN TOKENS
Black #050506 — primary reading background.
Charcoal #19191f — functional surfaces, details and roster.
White #f7f6ff — primary text and primary CTA.
Electric blurple #7164ff — core brand.
Orchid #d64cff — upper hero atmosphere and light.
Hot pink #ff58cf — warm rim, terms and badge stage.
Glacier #62e9d2 — cool rim, history/access stage.
Color lives in authored artwork, art stages and selected states. Body sections remain black.
Avoid a uniform purple wash across the entire site. Keep warm and cool stages distinct.

TYPE / GRID
Discord Nord bold, oblique treatment for main campaign headings; existing Ginto for body and controls.
Hero display: fluid 52–100px, 1.0 line-height. Do not color one arbitrary word.
Section display: fluid 34–54px. Body: 16–18px, 1.6 line-height, 48–65 character measure.
Maximum content: 1440px. Responsive gutters: 24px phone, 5vw desktop. Shared left/right rails.
Section spacing: 96–120px desktop; 60–72px phone.
Art stages: 36–48px corner radius. Controls: 12–16px. Avoid identical radii at every hierarchy.
Navigation floats transparently over the bright opening. Between 24px and 200px of scroll, its charcoal surface appears continuously, with a slight upward settle. Returning to the top reverses the same transition. The menu stays opaque while open on phones. Explicit destinations and current-section feedback remain visible.

PAGE MAP
1. Floating header: custom @ + wordmark; How it works / Past sales / Our team / Badge guide / Questions; Telegram action.
2. New hero: two-line Discord / usernames headline, 1 short explanation, white Telegram CTA, process link, compact real-team contact. The header emblem is white enamel with subtle cool depth; navigation labels are pure white.
   Main art: original 3D @ mascot with a blue-to-magenta enamel face, ultramarine depth and clean lighting. No hovering badge satellites in the hero; badges first appear inside their own exhibit.
   No giant profile window. No decorative copy embedded in the artwork.
3. Two large service exhibits: rare usernames and legacy badge accounts. Art dominates the upper stage; short explanation and one useful link below.
4. Process chapter: history → agreement → access. Three alternating illustrated rows, each with one visible explanation and optional detailed disclosure.
5. Historical conveyor: original machinery and handles. Runs at a steady 34px/sec while visible, completely independent of scrolling.
6. Team: original real avatars and tabs. $2M+ sales exclusively firexi; niko Outlook securing / 62+ acquisitions; ritual Hightier / $50M+ across markets.
7. Original badge selection: keep exact OG Partner controls and cabinet art. Surround it with the new black/charcoal typography and color discipline.
8. Useful FAQ: account/history, included email, terms, availability, badges and contacts. Native measured disclosures.
9. Exact original bottom @ interaction and contacts, framed as the closing brand moment.

MOTION MAP
Load 0–300ms: all copy and CTA already visible; artwork settles in without a loading veil.
Load 200–1400ms: @ rotates from a restrained three-quarter angle into its resting pose. Same mesh throughout.
Idle: authored light/pose cycle with a deliberate pause; a blink occasionally adds personality. Stop rendering offscreen and when hidden.
Hover/pointer: small gaze/tilt feedback, not a shaking whole character.
Scroll: the hero camera turns slightly as the scene exits. No fading into another object. The opening gradient resolves into black before the reading sections. The header surface follows the first 176px of scroll after a 24px resting interval.
Process: reversible scroll positions control flap → lift → insert; receipt feed; key insert → turn → unlock.
Each process row follows its own visible scroll interval, including phone. No artificial multi-screen empty runway.
Conveyor: time-driven. Roller angle matches linear belt travel. Preserve seamless repeat groups.
Badge exhibit: real faceted tokens with authentic symbols, each inspecting on a four-second cycle within the color stage.
Selections: brief in-place response. No cross-page flying cards.
Disclosures: measured height, reversible on rapid clicks, native semantics, no clipping after tabs resize.
Reduced motion: complete static artwork and useful content; direct state changes; stationary historical names.

ART / ENGINEERING
Build the logo as editable SVG, not raster typography.
Build the dimensional hero as a small procedural WebGL scene from the actual logo outline with a static SVG fallback.
Self-host the renderer and keep third-party license metadata. No runtime CDN dependency.
Use existing authentic Discord badge assets in authored 3D token/collectible compositions.
Use color-stage art for history, agreement and access; objects have physical states and retain identity.
Separate idle loops from scroll controllers; one owner for each animated transform.
Use IntersectionObserver to suspend offscreen work. Cap pixel ratio. Respect reduced motion and document visibility.
First paint never waits on WebGL; show the matching vector fallback immediately.
Preserve public routing, unique IDs, accessible native tabs, menu, contact destinations and download kit.

REVIEW GATES
The new mark reads as @ at 24px.
The hero is recognizable without a giant profile card or stock Discord mascot.
Black reading space is clearly different from the saturated hero and bounded media stages.
Every chapter says what it is and has one obvious next action.
At 390px and 1440px: no collisions, no horizontal overflow, aligned copy and art.
Scroll the entire page forward/backward; the key locks/unlocks in order.
Stand still at the belt; names and rollers continue moving.
Rapidly open/close all disclosures and menu; no stale inert state or clipped content.
Check exact protected original components, factual attribution, assets, module preload graph and public routing.
Save real desktop/phone screenshots and inspect them before delivering.

COMPOSED HERO / SURFACE REFINEMENT — 17 OCTOBER
User feedback: the hero still reads as copy beside an oversized emblem. Purple outlined panels also conflict with the rounded, stylized reference.
Direction: use the @ as a living typographic glyph inside one centered headline, not as a second column. The readable offer sits immediately below. Keep the white header identity and colored opening fading into black.
Palette: white #f7f6ff / black #050506 / neutral charcoal #19191f / blurple #7164ff / orchid #d64cff / glacier #62e9d2.
Type: Nord oblique for the two-line title; Ginto for the concrete offer, actions and factual details.
Layout:
                    YOUR NEXT
                   [@] NAME.
             Discord usernames + badge accounts
                 channel / process
                  real-team contact
The @ is the first character of @name. It shares the baseline and overlaps the word slightly. The shape remains the logo master, with softer enamel bevels and expressive eyes. A brief settle, a glance toward the name, an occasional wink, and a small reaction toward the CTA replace perpetual whole-object rotation.
Critique before implementation: a centered title with another orbiting logo would repeat the same problem. The emblem must occupy an actual character position; no floating side badges, art-frame UI or decorative captions.
Surfaces: charcoal, outline-free, 36–56px outer corners and 28–40px inset stages. FAQ rows are rounded charcoal surfaces, open content remains in the same surface. Remove dusty purple fills and visible panel outlines from supporting UI. Keep selected states colorful, and retain keyboard focus rings.
Protected: original Partner selector markup/art, conveyor machinery/handles, exact closing @, factual sales attribution and native disclosure behavior.

CURRENT USER STEERING / IMPLEMENTATION (SUPERSEDES EARLIER PROCESS STUDIES)
Header: flat white @, pure-white navigation, full desktop viewport minus 64px with no max-width cap. Transparent over the opening; scroll introduces the floating charcoal surface. Compact native menu on phones.
Hero: centered headline with a live @ glyph. A new blue Wumpus-like green-leaf creature and a dimensional lightning accent flank the type; on phones the accents sit below the actions with reserved space. The first headphone character was rejected and replaced.
Reading space: actual #000 black. Supporting surfaces are neutral #19191f, heavily rounded and borderless. FAQ rows are subtle transparent surfaces directly inside the closing gradient. The whole background rises smoothly through the questions from black into purple/orchid at the invitation.
Figures: count once on first visibility, including team panels. Accessible labels preserve full factual values. $2M+ sales remain exclusively firexi.
Conveyor: original exact markup/machinery preserved; palette updated to blurple, glacier, orchid and periwinkle with a neutral charcoal chassis.
Process: one native 310svh sticky shot, three explicit step controls, reversible global scroll timeline. No wheel interception. One stage/camera/object family remains mounted. History fans the same three objects open; details gathers/compresses them into a bounded light pulse; access spins and releases the same objects. There is no scene dissolve and no orbiting clock/list/shield checklist. Useful disclosures remain native and scroll inside the reading column. Reduced motion and short viewports show complete readable steps with final static artwork.
Reference study: brave_L7Y116Wr91.mp4 is 9.3s, 2038x996, 30fps. Sampled at 2fps into process-motion-study-2. Its right-hand Orbs animation gathers three beveled objects, compresses, pulses, and fans them apart in one continuous shot. Broad saturated lighting and deep side faces provide depth. The reference was used for choreography and material contrast, not copied footage.
Process studies rejected by the user: mail-machine, folio/receipt/key, flat faceted checklist icons, and merely softening those icons into pastel clay. Their code is not imported by the active runtime.
Closing art: retain the liked four-point sparkle. Replace the rejected left mail object with an original rounded orbit sculpture in the same blue/violet/mint/orchid material language. Exact generated asset prompts are in asset-prompts.json.
Badge guide: centered chapter heading and original sparkle, compact borderless native selector, quieter original cabinet artwork and straightforward descriptions. Original Partner selector markup/art remains exact.

LOWER GALLERY REVISION — LATEST FEEDBACK
The user rejected the literal conveyor, team switcher and oversized badge-guide interface. lower-gallery.css owns their new presentation.
History: black stage, clean rounded name plates, one blurple accent among charcoal plates; no studs, barcodes, rollers or legs. Preserve the original machinery markup and independent 34px/sec seamless transport.
People: three equal visible profile cards, direct Telegram contacts, readable stories and large standalone facts. Remove the roster switcher and purple fact bar. Facts retain exact attribution and count up once. Native article headings replace tab semantics.
Badges: shorter section heading, concise vertical selector on desktop / horizontal selector on phone, one focused detail panel. Original badge assets and selector markup remain exact; the old cabinet ornament is hidden by CSS. Native keyboard tabs and disclosures remain functional. No new badge-status claims were introduced.

SECTION GROUPING REFINEMENT
History and team share the same two-column heading/copy grid and content edges. The moving usernames sit in one contained rounded dark band. A 112px chapter break separates that band from the team; the gap inside each chapter is 32px. Phone spacing uses 24px within history and 72px before the team. No divider outlines were added.

BADGE COLLECTION GROUPING REFINEMENT
The badge chapter uses the same heading/copy grid as history and team. The collection label, vertical selector, focused badge panel and exclusions share one rounded dark shell. A compact near-square artwork stage balances the detail text. The exclusions form the shell footer instead of floating below it. On phones, the selector becomes horizontal above the stacked exhibit and description. Existing badge markup, facts, keyboard tabs and native disclosures are preserved.

STYLIZED DISPLAY AT
A new editable SVG at-sculpture.svg gives the master outline a lavender face, deep violet extrusion, one clean curved highlight and a small wink. The names card and closing invitation share it. The footer button loses its square tile; its existing click interaction cycles the sculpture finish. Protected closing markup and the white header identity remain exact. Archived yellow-character backup files are unchanged.

RENDERED DISPLAY AT / RELEASE 58
The user requested true sculpted depth matching the star. at-render.png replaces the flat SVG in the names feature and closing invitation. Built-in ImageGen produced a transparent enamel @ with deep inner walls, rounded bevels, softbox highlights, restrained mint/orchid reflections and the small wink. Prompt and reference provenance are in asset-prompts.json. The flat header and procedural hero remain unchanged. Ritual is corrected to $50M+ in both hero and team counts, accessible labels and current kit facts.


60 — Restrained names studio
The generated neon @ is rejected. The names feature and footer use a deterministic 3D mesh from the exact identity outline. Porcelain face, lavender extrusion, broad neutral lighting, a single soft cast shadow and two small physical username plaques create the complete names composition. The stage is flat pale violet. The expression, neon reflections, particles and idle bob are removed. Rendering occurs only on initial visibility, resize or the existing footer turn action; reduced motion uses the same static pose. The static fallback has no expression. The current hero and recovered /oldnigdesign/ archive remain unchanged. Firexi stays $2M+; ritual stays $50M+.


61 — Purple material and softer lighting
The user wanted the @ to retain the star's purple color. The existing mesh now has a saturated violet face and deep-purple extrusion. Lower exposure, a broad neutral room reflection and a restrained clear coat preserve the hue and keep highlights controlled. A wider variance-shadow filter and lower opacity replace the prior hard-edged shadows. Geometry, layout, idle behavior and protected content remain unchanged. The fallback vector matches the purple material.
