code/yieldomega
Watch
4
0
Fork
You've already forked yieldomega
 0
Code Issues 1 Pull requests 1 Projects Releases Packages Wiki Activity

Asset backlog: scenes, cutouts, icons, cursors, and graphic polish for the dapp #45

New issue
Closed
opened 2026-04-22 13:28:25 +00:00 by PlasticDigits · 11 comments
PlasticDigits commented 2026-04-22 13:28:25 +00:00 (Migrated from gitlab.com)

Context

The dapp’s visual system is arcade / consumer-game oriented (frontend/src/index.css: greens, gold, hard-shadow panels) with a Leprechaun / bunny mascot family already referenced across layouts and TimeCurve. docs/product/vision.md calls for joy, identity, and participation—illustration and motion should support that without obscuring onchain clarity (docs/frontend/design.md).

This issue inventories art direction and asset gaps: scenes, cutouts, icons, cursors, and other graphics so each route can feel complete and cohesive (not “placeholder + one hero JPG”). Implementation can be split into follow-up issues per asset pack.

Existing references (non-exhaustive, from frontend/src/): /art/token-logo.png, app-icon.png, opengraph.jpg, hero-home-wide.jpg, hero-home.jpg, *-card.jpg / sir-card.png, hat-coin-*.png, loading-mascot.png, cutouts under /art/cutouts/ (mascot, bunny-leprechaun-girl, leprechaun-with-bag, etc.).

1) Scenes & wide compositions (banners, heroes, cards)

  • Home / hub: final wide hero (desktop + mobile crop variants) that matches the arcade palette; optional parallax or layered SVG for performance.
  • TimeCurve Simple: dedicated scene (timer + “fair launch” energy) rather than reusing only Arena assets—reinforces first-run story from timecurve-views.md.
  • TimeCurve Arena: PvP / podium “arena” backplate or side-panel scene (tension, competition) distinct from Simple calm mode.
  • TimeCurve Protocol: neutral “operator/audit” backdrop (less playful, still on-brand).
  • Rabbit Treasury: reserve / burrow / chart-adjacent scene for when the page leaves UnderConstruction.
  • Collection: gallery-forward scene (shelves, vault, or grid motif) for NFT identity.
  • Referrals: network/social “threads” or invitation motif—distinct from Home generic hero.
  • Kumbaya & Sir: small branded scene strips for embedded DEX pages (even if iframe is dominant)—reduces “generic embed” feel.
  • Launch countdown: final launch key art (locked ratio for OG/social) aligned with LaunchCountdownPage composition.
  • Error / empty / offline states: 1–2 light illustrations (indexer down, wrong network) matching mascots.

2) Cutouts & characters (transparency, consistent lighting)

  • Mascot poses: wave, jump, “thinking,” “winning podium,” “guarding,” “sneak steal” (WarBow personality for Arena copy).
  • Leprechaun w/ bag vs bunny-leprechaun-girl set: style guide (line weight, shadow, max height in header) so RootLayout + TimeCurve cutouts don’t clash.
  • Trait-adjacent silos (future Collection): outline how cutouts might pair with NFT traits without duplicating onchain art IP—style alignment only if needed.
  • Footer / micro-decorations optional small cutouts for fee transparency or indexer bar (subtle, non-noisy).

3) Icons & UI micro-graphics

  • Token / asset set: CL8Y, DOUB, CHARM, USDm-as-context (if ever shown in UI labels)—consistent 24/32/48px SVG.
  • Status icons: live / ended / pre-launch badges; cooldown clock; network OK vs warning; indexer OK vs degraded.
  • WarBow actions (if iconified): guard, steal, revenge, flag—readable at small size, not replacing textual rules.
  • Navigation optional: small pictograms in nav or sub-nav for TimeCurveSubnav (Simple / Arena / Protocol).
  • Charts (Rabbit Treasury future): axis/chart line colors tied to tokens + accessibility (color-blind safe pairs).

4) Mouse cursors & pointer affordances (optional, performance-aware)

  • Primary CTA custom cursor or :active / hover micro-animation spec (if cursor files used: .cur / .png with hotspot—document fallbacks).
  • “Danger” or PvP actions: distinct hover treatment spec (color + icon + no prank cursors on irreversible actions).
  • Slider / buy control: consider grab vs default pointer rules for accessibility; avoid custom cursor on mobile.

5) Social / meta & app chrome

  • Open Graph + Twitter image variants (1:1 and wide) for launch and default share.
  • Favicon / maskable PWA icon set (if PWA is ever added)—single source from mascot geometry.
  • Rainbow/wallet modal feel: not fully controllable, but surrounding page chrome (background, header) should stay on-brand when modal opens.

6) Motion & VFX (short list; align with prefers-reduced-motion)

  • Route transitions: optional subtle VFX in RootLayout—document max duration; respect reduced motion.
  • Countdown tick / flip—if added, no seizure-risk flashing; test contrast.
  • Victory / podium (post-end states): light confetti or medal motif—separate from core trading UI to avoid distraction during active sale.

7) Audio (if ever in scope—flag as optional)

  • UI sounds off by default; opt-in with persistent user preference; no auto-play on load.

Deliverable

Prioritize a MVP art pack (mascot consistency + 3–4 hero/scene images + icon set) then iterate per page. Link export specs: format (SVG vs PNG@2x), max file size for IPFS, and license (AGPL artwork vs CC—align with maintainers).

## Context The dapp’s visual system is **arcade / consumer-game** oriented (`frontend/src/index.css`: greens, gold, hard-shadow panels) with a **Leprechaun / bunny** mascot family already referenced across layouts and TimeCurve. [`docs/product/vision.md`](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/docs/product/vision.md) calls for **joy, identity, and participation**—illustration and motion should support that without obscuring onchain clarity ([`docs/frontend/design.md`](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/docs/frontend/design.md)). This issue inventories **art direction and asset gaps**: scenes, cutouts, icons, cursors, and other graphics so each route can feel **complete and cohesive** (not “placeholder + one hero JPG”). Implementation can be split into follow-up issues per asset pack. **Existing references (non-exhaustive, from `frontend/src/`):** `/art/token-logo.png`, `app-icon.png`, `opengraph.jpg`, `hero-home-wide.jpg`, `hero-home.jpg`, `*-card.jpg` / `sir-card.png`, `hat-coin-*.png`, `loading-mascot.png`, cutouts under `/art/cutouts/` (mascot, bunny-leprechaun-girl, leprechaun-with-bag, etc.). --- ## 1) Scenes & wide compositions (banners, heroes, cards) - [ ] **Home / hub:** final wide hero (desktop + mobile crop variants) that matches the arcade palette; optional parallax or layered SVG for performance. - [ ] **TimeCurve Simple:** dedicated scene (timer + “fair launch” energy) rather than reusing only Arena assets—reinforces first-run story from `timecurve-views.md`. - [ ] **TimeCurve Arena:** PvP / podium “arena” backplate or side-panel scene (tension, competition) distinct from Simple calm mode. - [ ] **TimeCurve Protocol:** neutral “operator/audit” backdrop (less playful, still on-brand). - [ ] **Rabbit Treasury:** reserve / burrow / chart-adjacent scene for when the page leaves `UnderConstruction`. - [ ] **Collection:** gallery-forward scene (shelves, vault, or grid motif) for NFT identity. - [ ] **Referrals:** network/social “threads” or invitation motif—distinct from Home generic hero. - [ ] **Kumbaya & Sir:** small branded **scene strips** for embedded DEX pages (even if iframe is dominant)—reduces “generic embed” feel. - [ ] **Launch countdown:** final launch key art (locked ratio for OG/social) aligned with `LaunchCountdownPage` composition. - [ ] **Error / empty / offline states:** 1–2 light illustrations (indexer down, wrong network) matching mascots. --- ## 2) Cutouts & characters (transparency, consistent lighting) - [ ] **Mascot poses:** wave, jump, “thinking,” “winning podium,” “guarding,” “sneak steal” (WarBow **personality** for Arena copy). - [ ] **Leprechaun w/ bag** vs **bunny-leprechaun-girl** set: style guide (line weight, shadow, max height in header) so `RootLayout` + `TimeCurve` cutouts don’t clash. - [ ] **Trait-adjacent silos (future Collection):** outline how cutouts might pair with NFT traits without duplicating onchain art IP—**style** alignment only if needed. - [ ] **Footer / micro-decorations** optional small cutouts for fee transparency or indexer bar (subtle, non-noisy). --- ## 3) Icons & UI micro-graphics - [ ] **Token / asset set:** CL8Y, DOUB, CHARM, USDm-as-context (if ever shown in UI labels)—consistent 24/32/48px SVG. - [ ] **Status icons:** live / ended / pre-launch badges; cooldown clock; network OK vs warning; indexer OK vs degraded. - [ ] **WarBow actions** (if iconified): guard, steal, revenge, flag—readable at small size, **not** replacing textual rules. - [ ] **Navigation** optional: small pictograms in nav or sub-nav for `TimeCurveSubnav` (Simple / Arena / Protocol). - [ ] **Charts** (Rabbit Treasury future): axis/chart line colors tied to tokens + accessibility (color-blind safe pairs). --- ## 4) Mouse cursors & pointer affordances (optional, performance-aware) - [ ] **Primary CTA** custom cursor or `:active` / hover micro-animation spec (if cursor files used: `.cur` / `.png` with hotspot—document fallbacks). - [ ] **“Danger”** or PvP actions: distinct hover treatment spec (color + icon + **no** prank cursors on irreversible actions). - [ ] **Slider / buy** control: consider grab vs default pointer rules for accessibility; avoid custom cursor on mobile. --- ## 5) Social / meta & app chrome - [ ] **Open Graph** + **Twitter** image variants (1:1 and wide) for launch and default share. - [ ] **Favicon** / maskable PWA icon set (if PWA is ever added)—single source from mascot geometry. - [ ] **Rainbow/wallet** modal feel: not fully controllable, but **surrounding** page chrome (background, header) should stay on-brand when modal opens. --- ## 6) Motion & VFX (short list; align with `prefers-reduced-motion`) - [ ] **Route transitions:** optional subtle VFX in `RootLayout`—document max duration; respect reduced motion. - [ ] **Countdown** tick / flip—if added, no seizure-risk flashing; test contrast. - [ ] **Victory / podium** (post-end states): light confetti or medal motif—separate from core trading UI to avoid distraction during active sale. --- ## 7) Audio (if ever in scope—flag as optional) - [ ] **UI sounds** off by default; opt-in with persistent user preference; **no** auto-play on load. --- ## Deliverable Prioritize a **MVP art pack** (mascot consistency + 3–4 hero/scene images + icon set) then iterate per page. Link export specs: **format** (SVG vs PNG@2x), **max file size** for IPFS, and **license** (AGPL artwork vs CC—align with maintainers).
PlasticDigits commented 2026-04-22 15:07:02 +00:00 (Migrated from gitlab.com)

assigned to @PlasticDigits

assigned to @PlasticDigits
PlasticDigits commented 2026-04-23 07:22:27 +00:00 (Migrated from gitlab.com)

mentioned in commit e9600df65d

mentioned in commit e9600df65ddb60662645d04d05b2755ae30e64e3
PlasticDigits commented 2026-04-23 13:43:58 +00:00 (Migrated from gitlab.com)

mentioned in commit 2bd58f4757

mentioned in commit 2bd58f4757d5828a6664c09fe90ad816ec798511
PlasticDigits commented 2026-04-23 13:44:09 +00:00 (Migrated from gitlab.com)

mentioned in issue #44

mentioned in issue #44
PlasticDigits commented 2026-04-24 05:10:41 +00:00 (Migrated from gitlab.com)

mentioned in commit 54464a318d

mentioned in commit 54464a318d38b1ebf9861dcb2d473f14e3e19ffb
PlasticDigits commented 2026-04-24 05:10:41 +00:00 (Migrated from gitlab.com)

mentioned in commit 86066c8b7d

mentioned in commit 86066c8b7d5439f43e84aa50e227b795bf0d1952
PlasticDigits commented 2026-04-24 05:10:41 +00:00 (Migrated from gitlab.com)

mentioned in commit 1aca213266

mentioned in commit 1aca213266b4b8fa1e9f7370a88e9cd6cc8d6ac0
PlasticDigits commented 2026-04-24 05:11:53 +00:00 (Migrated from gitlab.com)

mentioned in issue #57

mentioned in issue #57
PlasticDigits commented 2026-04-24 05:12:18 +00:00 (Migrated from gitlab.com)

Closing — issue #45 raster pack is now promoted into purpose-named folders under frontend/public/art/ and wired into the live UI as part of the issue #44 design pass.

Merged in main at 1aca213 ("Merge branch 'feat/issues-44-45-design-pass' (issues #44 + #45)").

What landed

  • Asset migration: 52 rasters moved from frontend/public/art/issue45/ into cutouts/, scenes/, icons/, cursors/, social/, motion/. Historic catalog kept at issue45/README.md; new top-level art/README.md maps every file to its consumer.
  • Scenes: wired into HomePage (responsive <picture>), TimeCurve Simple/Arena/Protocol heroes, LaunchCountdown full-page backdrop, Rabbit Treasury, Collection, Kumbaya, Sir, error pages.
  • Status pictograms: added to PageBadge (TimeCurve sale phase + app-header live badge), IndexerStatusBar, and TimeCurveSubnav per-route icons.
  • Cursors: custom CTA cursor on .btn-primary / .btn-secondary, danger cursor on .btn-secondary--critical, slider grab/grabbing on input[type="range"] (with native fallbacks).
  • Cutouts: new mascots wired into TimeCurve Simple (leprechaun-bag-bunny-pair), Arena (bunny-podium-win), Protocol (bunny-thinking), Treasury (bunny-guarding), and pages that previously had no mascot.
  • Docs / guardrails: docs/frontend/design.md now documents the purpose-named layout; .cursor/skills/yieldomega-guardrails/SKILL.md gained guardrail #12 so future agents update the consumer table in lock-step.

What does not yet exist on disk

The pack does not cover every slot the dapp UI calls for. Tracked in docs/frontend/missing-art-assets.md and opened as the follow-up issue #57 ("Asset backlog (round 2): cursors, status icons, story scenes, social/PWA refresh"), to be generated via the same scripts/replicate-art/ flow used for #45.

Verification

  • All 135 frontend unit tests pass; production build succeeds.
  • All affected views were inspected via the Cursor browser (HomePage, LaunchCountdown gated + ungated, TimeCurve Simple/Arena/Protocol, Treasury/Collection/Kumbaya/Sir under-construction screens) before merge.
Closing — issue #45 raster pack is now promoted into purpose-named folders under [`frontend/public/art/`](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/frontend/public/art/README.md) and wired into the live UI as part of the issue #44 design pass. **Merged in `main` at `1aca213`** ("Merge branch 'feat/issues-44-45-design-pass' (issues #44 + #45)"). ## What landed - **Asset migration:** 52 rasters moved from `frontend/public/art/issue45/` into `cutouts/`, `scenes/`, `icons/`, `cursors/`, `social/`, `motion/`. Historic catalog kept at [`issue45/README.md`](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/frontend/public/art/issue45/README.md); new top-level [`art/README.md`](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/frontend/public/art/README.md) maps every file to its consumer. - **Scenes:** wired into HomePage (responsive `<picture>`), TimeCurve Simple/Arena/Protocol heroes, LaunchCountdown full-page backdrop, Rabbit Treasury, Collection, Kumbaya, Sir, error pages. - **Status pictograms:** added to `PageBadge` (TimeCurve sale phase + app-header live badge), `IndexerStatusBar`, and `TimeCurveSubnav` per-route icons. - **Cursors:** custom CTA cursor on `.btn-primary` / `.btn-secondary`, danger cursor on `.btn-secondary--critical`, slider grab/grabbing on `input[type="range"]` (with native fallbacks). - **Cutouts:** new mascots wired into TimeCurve Simple (`leprechaun-bag-bunny-pair`), Arena (`bunny-podium-win`), Protocol (`bunny-thinking`), Treasury (`bunny-guarding`), and pages that previously had no mascot. - **Docs / guardrails:** [`docs/frontend/design.md`](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/docs/frontend/design.md) now documents the purpose-named layout; [`.cursor/skills/yieldomega-guardrails/SKILL.md`](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/.cursor/skills/yieldomega-guardrails/SKILL.md) gained guardrail #12 so future agents update the consumer table in lock-step. ## What does not yet exist on disk The pack does not cover **every** slot the dapp UI calls for. Tracked in [`docs/frontend/missing-art-assets.md`](https://gitlab.com/PlasticDigits/yieldomega/-/blob/main/docs/frontend/missing-art-assets.md) and opened as the follow-up issue **#57** ("Asset backlog (round 2): cursors, status icons, story scenes, social/PWA refresh"), to be generated via the same `scripts/replicate-art/` flow used for #45. ## Verification - All 135 frontend unit tests pass; production build succeeds. - All affected views were inspected via the Cursor browser (HomePage, LaunchCountdown gated + ungated, TimeCurve Simple/Arena/Protocol, Treasury/Collection/Kumbaya/Sir under-construction screens) before merge.
PlasticDigits (Migrated from gitlab.com) closed this issue 2026-04-24 05:12:20 +00:00
PlasticDigits commented 2026-04-24 06:29:22 +00:00 (Migrated from gitlab.com)

mentioned in issue #60

mentioned in issue #60
PlasticDigits commented 2026-04-24 08:18:43 +00:00 (Migrated from gitlab.com)

mentioned in issue #62

mentioned in issue #62
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
cac-design-issue-544
renovate/configure
No results found.
Labels
Clear labels   
agent:fix_bugfix

   
agent:fix_conflicts

   
agent:fix_security

   
agent:gap_analysis

   
agent:implement

   
agent:open_issues

   
agents

   
agent:security_audit

   
agent:verify
  
area
timecurve

  
arena

   
arena-v2

   
audit

   
block:feature_review

   
block:security

   
bug

   
contracts

   
design

   
devops

   
docs
Documentation

  
documentation

   
enhancement

   
epic
Epic / umbrella issue

  
feature

   
frontend

   
indexer

   
low priority
Low priority, investigate other issues first

  
megaeth

   
operations

   
ops
Deploy and operations

  
performance

   
QA

   
qa checklist

   
referrals

   
removal
Legacy removal

  
security

   
smart-contracts

   
tech-debt

   
testing

   
time-arena
TimeArena v2 revamp

  
timecurve

   
visual-qa
No labels
agent:fix_bugfix
agent:fix_conflicts
agent:fix_security
agent:gap_analysis
agent:implement
agent:open_issues
agents
agent:security_audit
agent:verify
area
timecurve
arena
arena-v2
audit
block:feature_review
block:security
bug
contracts
design
devops
docs
documentation
enhancement
epic
feature
frontend
indexer
low priority
megaeth
operations
ops
performance
QA
qa checklist
referrals
removal
security
smart-contracts
tech-debt
testing
time-arena
timecurve
visual-qa
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
code/yieldomega#45
No description provided.