System Requirements Document for solana-wallet

1. Introduction

This document specifies the system requirements for solana-wallet, the personal Solana wallet-profile landing page for the brand FARHAN J SETUPLY. The product is a single, self-hosted public web page with its own URL whose primary purpose is to display the public Solana wallet address D6HgTwSBn6FLen9asJWUJxZu5mD7P3rJQAzzJLM1WVwv so that visitors can view, copy, and open that address in a blockchain explorer.

The product intent is a modern, premium, futuristic, and responsive landing page with a Solana Purple / Neon Purple theme — dark, futuristic, premium crypto aesthetic — that presents the wallet address like a piece of jewellery rather than a utility form, while remaining calm, safe, and trustworthy because it is public-key-only and never asks the visitor for anything.

The audience is:

• The Wallet Profile Owner (Farhan J Setuply), who needs a shareable public URL for his TikTok bio, social media bios, and crypto communities.
• Visitors arriving from those shared links, mostly on phones, who want the correct public address and a reliable way to copy it, scan it, or open it on Solscan.

2. System Overview

The system is a single-page, static-first, client-rendered landing page delivered as a public URL. It has no backend service, no database, no authentication, and no server-side state. All behavior is client-side: rendering the address, copying it to the clipboard, generating the QR code from the exact address string, and linking out to Solscan.

Actors:

• Wallet Profile Owner — the brand owner who publishes and shares the page.
• Visitor — the anonymous public arriving from a shared link.
• Solscan (external destination) — the blockchain explorer that receives the outbound link.

Accepted behavior:

• Display the exact public wallet address with no character changed, swapped, truncated, or added.
• Copy the full address to the clipboard with a success notification, and fall back to revealing the address for manual copy when the clipboard is unavailable.
• Open the address on Solscan in a new tab with appropriate security attributes.
• Render a valid, high-contrast, scannable QR code whose content is exactly the wallet address.
• Present the brand, hero, wallet card, footer, and the specified visual/animation treatment.
• Be responsive and mobile-first across Android/iPhone, tablet, laptop, and desktop.

Ownership and delivery boundary: The page is a first-party custom surface owned by the application, anonymously reachable, with no login, no wallet connection, and no payment. The Solscan explorer is an external destination owned by a third party; the page only links to it.

Narrow exclusions (binding):

• The website only displays the public wallet address.
• No seed phrase, private key, password, or sensitive data is ever requested, shown, or processed.
• No fake wallet login form and no wallet-connect form.
• No automatic wallet connection and no automatic transaction sending.
• No fee or payment is ever required to view the address.
• The site must not claim to be the official Solana website.
• No balances, tokens, prices, or fake transactions are displayed.
• No donation or payment features that are not properly integrated.
• No other brand's logo is used as the primary identity.

2a. Product Interpretation and Delivery Boundary

The product is a public, anonymous, read-only identity page. There is no account, no session, no private state, and no user-specific data to resume — so no identity establishment or verification is required or introduced. The only durable artifact is the published public URL itself, which the Wallet Profile Owner shares externally.

All interactive work happens in the visitor's browser: the address is a constant string, the QR code is generated client-side from that string, and the Solscan link is a plain outbound hyperlink. The Solscan explorer is a provider/external destination; the page does not own, mirror, or reproduce its content, and it must not display balances, tokens, prices, or transactions itself.

Everything described in this document is current scope. No future-horizon features are accepted; the security and limitation constraints above remain binding for the current delivery.

2b. Source Content Inventory

The reference directive for https://solscan.io/account/D6HgTwSBn6FLen9asJWUJxZu5mD7P3rJQAzzJLM1WVwv declares uses: ["feature_reference"] with authority: authoritative. It supplies only the destination for the VIEW ON SOLSCAN button and the footer Solscan link, and the requirement to open it in a new tab with appropriate security attributes. It is not a content_source, so no content inventory is included.

2c. Page Content and Component Coverage

Landing

The single public page of the product. It is anonymously reachable, has no login gate, and is the only elevated surface on the page (the wallet card).

Information and state

• Brand identity: wordmark FARHAN J SETUPLY, custom three-bar geometric logo mark (a from-scratch Solana-horizontal-lines reference, not the Solana logo).
• Micro-label: SOLANA WALLET PROFILE.
• Main heading: MY SOLANA ADDRESS, with the words SOLANA ADDRESS carrying a purple gradient.
• Subtitle: "Welcome to my on-chain space. Explore my Solana wallet and connect with the ecosystem."
• Indonesian description: "Halaman resmi untuk melihat dan menyalin alamat wallet Solana Farhan J Setuply."
• Wallet card label: SOLANA PUBLIC WALLET ADDRESS.
• The exact address: D6HgTwSBn6FLen9asJWUJxZu5mD7P3rJQAzzJLM1WVwv.
• Footer: © 2026 FARHAN J SETUPLY and Built with\x20\xf0\x9f\x92\x9c on Solana, plus a small Solscan link.
• Transient state: copy-success toast reading "Wallet address copied successfully!"; clipboard-unavailable fallback state that reveals the address for manual copy.

Primary actions

• COPY ADDRESS — neon purple pill button; copies the full address to the clipboard and shows the success notification; if the clipboard is unavailable, reveals the address for manual copy.
• VIEW ON SOLSCAN — opens https://solscan.io/account/D6HgTwSBn6FLen9asJWUJxZu5mD7P3rJQAzzJLM1WVwv in a new tab with rel="noopener noreferrer".

Supporting actions

• Footer Solscan link — same destination, same new-tab and security attributes.
• QR code — scannable by a Solana wallet; content is exactly the wallet address; white/high-contrast background; no decorative overlay over the code matrix.

Domain entities

• Wallet address (constant string, 44 characters).
• Solscan account URL (derived from the address).
• QR code payload (identical to the address).

Component responsibilities

• Top bar — logo mark + wordmark on the left, small Solscan text link on the right.
• Hero block — micro-label, oversized stacked headline with gradient on "SOLANA ADDRESS", English subtitle, Indonesian description; the large low-opacity logo mark bleeds behind the type on the right.
• Wallet card — the single elevated glass object: card label, address as display type, two-button row, hairline divider with node squares, QR tile with its label and green corner ticks.
• Copy toast — glass toast that rises from the card's lower edge on successful copy.
• Footer — hairline-separated centred block with the two required lines and the small Solscan link.
• Background layer — dark purple gradient, slow-moving purple light particles, faint isometric lattice, hairline neon rules.

States

• Loading — the page is static-first; the QR code renders client-side from the constant address string. No network fetch is required for the address, so there is no blocking loading state for the core content.
• Empty — not applicable; the address is a constant and is always present.
• Success — copy success shows the toast and a one-shot green pulse on the card border; the label swaps to "COPIED ✓" for 2.4s.
• Error / recovery — if the clipboard API is unavailable or the copy call fails, the address is revealed for manual selection and copying, so the visitor can still obtain the exact address.
• Reduced motion — with prefers-reduced-motion, the particle layer and entrance animation are disabled and a usable static arrangement is presented.

3. Functional Requirements

Each requirement below is a distinct story point with provenance, lifecycle facts, and observable acceptance.

FR-1 — Brand and theme presentation (explicit) As the Wallet Profile Owner, I should have the page present the brand FARHAN J SETUPLY with a Solana Purple / Neon Purple, dark futuristic, premium crypto aesthetic, so that visitors immediately read the page as a credible, premium on-chain identity.

• Input/trigger: page load.
• Observable result: brand name, theme colors, neon gradients, soft glow, glassmorphism, transparent borders, soft animation, and futuristic lighting are visible.
• Access state: anonymous, no login.
• Failure/recovery: not applicable (static presentation).
• Continuation: visitor proceeds to the hero and wallet card.

FR-2 — Custom geometric logo (explicit) As the Wallet Profile Owner, I should have a geometric logo inspired by Solana's horizontal lines, so that the page has its own identity without using another brand's logo as the primary identity.

• Observable result: a from-scratch horizontal-bar logo mark appears in the top bar and as a large low-opacity ghost in the hero.
• Constraint: no other brand's logo is used as the primary identity.

FR-3 — Hero section content (explicit) As a Visitor, I should see the hero at the top of the page with the neon-styled logo, the brand name FARHAN J SETUPLY, the small label SOLANA WALLET PROFILE, the main heading MY SOLANA ADDRESS, the subtitle "Welcome to my on-chain space. Explore my Solana wallet and connect with the ecosystem.", and the Indonesian description "Halaman resmi untuk melihat dan menyalin alamat wallet Solana Farhan J Setuply.", so that I understand whose wallet this is and what the page is for.

• Observable result: all six hero elements are present and readable.
• Typography: modern, bold, elegant, with a purple gradient effect on the words SOLANA ADDRESS.

FR-4 — Wallet card presentation (explicit) As a Visitor, I should see a premium wallet card centered on the page with dark glassmorphism, a neon purple border, rounded corners, and a soft glow, labeled SOLANA PUBLIC WALLET ADDRESS, so that the address is presented as the visual centre of gravity.

• Observable result: the card is the single elevated object on the page and the address sits directly under the card label at display-data size.

FR-5 — Exact address display (explicit) As a Visitor, I should see the wallet address displayed exactly as D6HgTwSBn6FLen9asJWUJxZu5mD7P3rJQAzzJLM1WVwv, so that I can trust the address I read.

• Constraint: no character changed, swapped, truncated, or added.
• Observable result: the 44-character address is fully readable and never clipped, including on small screens.

FR-6 — Copy address (explicit) As a Visitor, I should press the neon purple COPY ADDRESS button to copy the entire wallet address to my clipboard and see the notification "Wallet address copied successfully!", so that I can paste the address wherever I need it.

• Trigger: button press.
• Observable result: the full address is on the clipboard and the success notification is shown.
• Failure/recovery: if the clipboard is unavailable, the address is displayed so the visitor can copy it manually.
• Continuation: the visitor pastes the address into their wallet or app.

FR-7 — View on Solscan (explicit) As a Visitor, I should press VIEW ON SOLSCAN to open https://solscan.io/account/D6HgTwSBn6FLen9asJWUJxZu5mD7P3rJQAzzJLM1WVwv in a new tab with appropriate security attributes, so that I can inspect the address on the blockchain explorer without leaving the profile page.

• Observable result: the Solscan account page opens in a new tab; the original page remains open.
• Security attributes: target="_blank" with rel="noopener noreferrer".

FR-8 — Valid QR code (explicit) As a Visitor, I should scan a valid QR code generated from the exact wallet address with my Solana wallet, so that I can obtain the address without typing it.

• Constraint: the QR content is exactly D6HgTwSBn6FLen9asJWUJxZu5mD7P3rJQAzzJLM1WVwv; the background is white or high-contrast; the code is not decorative and is not obstructed by overlays.
• Observable result: a Solana wallet scans the code and reads the exact address.
• Failure/recovery: the address remains readable and copyable as text if scanning is not possible.

FR-9 — Visuals and animation (explicit) As a Visitor, I should experience a dark purple gradient background, slowly moving purple light particles, a soft glow around the wallet card, hover animation on buttons, a smooth transition when the card appears, thin neon line effects, and minimalist blockchain-themed geometric ornaments, so that the page feels premium and futuristic.

• Constraint: animations must be light and must not disturb phone performance; the design must not be too busy and must prioritize an exclusive, clean, professional impression.

FR-10 — Responsive, mobile-first layout (explicit) As a Visitor, I should use the page comfortably on Android and iPhone, tablet, laptop, and desktop, so that I can read and copy the address on any device.

• Constraint: mobile-first approach; the wallet address must be readable and copyable on small screens; buttons must be comfortably tappable and must not overlap.

FR-11 — Footer (explicit) As a Visitor, I should see © 2026 FARHAN J SETUPLY and Built with\x20\xf0\x9f\x92\x9c on Solana in the footer, plus a small link to Solscan to view the wallet, so that I have the brand line and a second route to the explorer.

• Observable result: both lines are present and the small Solscan link opens the same destination in a new tab with appropriate security attributes.

FR-12 — Functional, non-mockup build (explicit) As the Wallet Profile Owner, I should have a genuinely functional landing page — not a mockup image — built with HTML, CSS, and JavaScript or a framework supported by Builder.io, with reusable components, clean code, good accessibility, and performance optimization, so that the copy address feature, the Solscan link, and the QR code all work.

• Observable result: all three features work live in the published page.

FR-13 — Builder.io publishing readiness (explicit) As the Wallet Profile Owner, I should be able to publish the site through Builder.io's available hosting or publishing feature and receive my own public URL, so that I can share it on TikTok, in social media bios, and in crypto communities.

• Observable result: a public URL is available and the page renders correctly from it.

FR-14 — Security and limitation compliance (explicit) As the Wallet Profile Owner, I should have the page comply with all stated security and limitation constraints, so that visitors are never exposed to risk and the page never misrepresents itself.

• Constraints: display only the public wallet address; never request, show, or process seed phrases, private keys, passwords, or sensitive data; no fake wallet login form; no automatic wallet connection; no automatic transaction sending; no fee or payment required to view the address; do not claim to be the official Solana website; do not display balances, tokens, prices, or fake transactions; no donation or payment features that are not properly integrated; all buttons must work.

4. User Personas

Wallet Profile Owner

Product context. Farhan J Setuply owns the personal Solana wallet profile page. He is the brand behind FARHAN J SETUPLY and the person who publishes the page and shares its public URL.

Primary goal. Give visitors a single, trustworthy, premium-looking destination where his exact public Solana address can be viewed, copied, scanned, or opened on Solscan — reachable from a link in his TikTok bio, social media bios, and crypto communities.

Distinct accepted responsibilities.

• Ensuring the page presents his exact public wallet address with no character changed, swapped, truncated, or added.
• Ensuring the QR code is valid and scannable and encodes exactly the same address.
• Ensuring the copy-address action and the Solscan link both work.
• Publishing the page through Builder.io's hosting/publishing feature to obtain his own public URL.
• Keeping the page compliant with the security and limitation constraints so visitors are never asked for sensitive data or payment.

Relevant inputs or decisions. The exact wallet address string; the Solscan account URL derived from it; the brand name and theme; the decision to publish and share the resulting public URL.

Interactions with other accepted participants. He does not interact with visitors directly on the page; his responsibility is to make the page correct and shareable so that visitors can reliably reach his on-chain space. He links out to Solscan, which is an external destination he does not own.

Observable success. The published public URL renders the premium Solana Purple page with the correct address, a valid QR code, a working copy button, and a working Solscan link, and it can be shared on TikTok, social bios, and crypto communities.

Visitor

Product context. A visitor arrives from a shared link — typically a TikTok bio, a social media bio, or a crypto community post — most often on a phone. The audience is crypto-native and design-literate and judges credibility in the first two seconds.

Primary goal. Obtain the correct public Solana wallet address of FARHAN J SETUPLY and use it — by copying it, scanning it with a Solana wallet, or opening it on Solscan.

Distinct accepted responsibilities.

• Reading the displayed public wallet address.
• Copying the address to the clipboard, or copying it manually if the clipboard is unavailable.
• Scanning the QR code with a Solana wallet.
• Opening the address on Solscan in a new tab.

Relevant inputs or decisions. Which route to use — copy, scan, or open on Solscan — based on what the visitor needs the address for.

Interactions with other accepted participants. The visitor interacts with the page's copy button, QR code, and Solscan link. The visitor never interacts with the Wallet Profile Owner directly and is never asked for login, payment, or sensitive data.

Observable success. The visitor holds the exact address D6HgTwSBn6FLen9asJWUJxZu5mD7P3rJQAzzJLM1WVwv — on the clipboard, in their wallet via scan, or open on Solscan — without any login, payment, or sensitive data being requested.

5. Core User Flows

Flow A — Wallet Profile Owner publishes and shares the page

1. The Wallet Profile Owner builds the landing page as a genuinely functional page (not a mockup) using HTML, CSS, and JavaScript or a framework supported by Builder.io, with reusable components, clean code, good accessibility, and performance optimization.
2. He verifies that the displayed address is exactly D6HgTwSBn6FLen9asJWUJxZu5mD7P3rJQAzzJLM1WVwv with no character changed, swapped, truncated, or added.
3. He verifies that the QR code is valid, scannable by a Solana wallet, high-contrast, and encodes exactly the same address.
4. He verifies that the COPY ADDRESS button copies the full address and shows "Wallet address copied successfully!", and that the clipboard-unavailable fallback reveals the address for manual copy.
5. He verifies that VIEW ON SOLSCAN and the footer Solscan link both open https://solscan.io/account/D6HgTwSBn6FLen9asJWUJxZu5mD7P3rJQAzzJLM1WVwv in a new tab with appropriate security attributes.
6. He publishes the site through Builder.io's available hosting or publishing feature and obtains his own public URL.
7. Observable result: a public URL that renders the premium Solana Purple wallet profile page with the correct address, valid QR code, working copy button, and working Solscan link.
8. Continuation: he shares the URL on TikTok, in social media bios, and in crypto communities.
9. Failure/recovery: if any feature does not work live, he corrects it before sharing, because all buttons must work and the copy address feature, Solscan link, and QR code must all function.

Flow B — Visitor copies the address

1. The Visitor opens the shared public URL on a phone, tablet, laptop, or desktop. The page loads anonymously with no login, no wallet connection, and no payment.
2. The Visitor reads the hero — the neon logo, FARHAN J SETUPLY, SOLANA WALLET PROFILE, MY SOLANA ADDRESS with the gradient on "SOLANA ADDRESS", the English subtitle, and the Indonesian description — and understands this is the official page for viewing and copying Farhan J Setuply's Solana wallet address.
3. The Visitor reaches the wallet card labeled SOLANA PUBLIC WALLET ADDRESS and reads the address D6HgTwSBn6FLen9asJWUJxZu5mD7P3rJQAzzJLM1WVwv directly under the label.
4. The Visitor presses the neon purple COPY ADDRESS button.
5. Observable result: the entire wallet address is copied to the clipboard and the notification "Wallet address copied successfully!" is shown.
6. Failure/recovery: if the clipboard is unavailable, the address is displayed so the Visitor can copy it manually.
7. Continuation: the Visitor pastes the address into their wallet or app.

Flow C — Visitor scans the QR code

1. The Visitor opens the shared public URL and scrolls to the wallet card.
2. The Visitor opens their Solana wallet's scanner and points it at the QR code on the card.
3. Observable result: the wallet reads the exact address D6HgTwSBn6FLen9asJWUJxZu5mD7P3rJQAzzJLM1WVwv from the high-contrast, unobstructed QR code.
4. Failure/recovery: if scanning is not possible, the address remains readable and copyable as text on the card.
5. Continuation: the Visitor uses the address in their wallet.

Flow D — Visitor opens the address on Solscan

1. The Visitor opens the shared public URL.
2. The Visitor presses VIEW ON SOLSCAN on the wallet card, or the small Solscan link in the footer.
3. Observable result: https://solscan.io/account/D6HgTwSBn6FLen9asJWUJxZu5mD7P3rJQAzzJLM1WVwv opens in a new tab with appropriate security attributes, and the profile page remains open in the original tab.
4. Continuation: the Visitor inspects the address on the external explorer and can return to the profile page.

6. Visuals Colors and Theme

The creative direction is authoritative for this section: Layered translucency, purple-lit — glassmorphism with a Solana pulse, muse Michal Malewicz. The user's mandated Solana Purple palette is preserved exactly and used in strict proportion.

Color tokens (dark mode)

Surface treatment. The wallet card is a frosted panel: rgba(25,13,43,0.55) over backdrop-filter: blur(20px), with a 1px border of rgba(168,85,247,0.45), an inner top highlight of rgba(232,121,249,0.35), and a soft outer glow 0 0 60px rgba(168,85,247,0.28). Background washes: a #190D2B radial wash top-left and a very low-opacity #7C3AED wash bottom-right — never a mid-page blob. Neon glows are rendered as blurred box-shadows behind elements, never as coloured text on coloured ground.

Typography. Headings Space Grotesk — 700 for the display headline, set tight (letter-spacing -0.03em, line-height 0.95) in sentence case for "MY SOLANA ADDRESS" so the gradient lands on "SOLANA ADDRESS"; 500 for section titles and the wordmark lockup, with +0.22em uppercase tracking on the micro-labels ("SOLANA WALLET PROFILE", "SOLANA PUBLIC WALLET ADDRESS") so they read as engraved instrument text. Body Manrope 400/600 at 17px/1.7 on mobile and 18px/1.75 on desktop. The wallet address is set in Space Grotesk 500 with letter-spacing 0.02em and tabular figures so the 44 characters align in a clean block; it wraps at 8-character groups on narrow screens and is never clipped.

Type scale (1.333 modular on a 4px baseline): display clamp(40px, 9vw, 108px); h2 clamp(26px, 4.4vw, 44px); h3 22/28; lead 18/22; body 17/18; label 12/13 uppercase; mono-data 15/19. Mobile sizes are the clamp minimums.

Shape language. Glassmorphism as the core form: 28px radius on the wallet card, 22px on the QR tile, full-pill (999px) buttons, 16px on the copy-toast. Every glass surface gets a 1px translucent border, a 1px inner top highlight to fake a lit edge, and a soft outer glow. Ornament is geometric and blockchain-adjacent but minimal: three stacked horizontal bars as the custom logo mark, hairline 1px neon rules that terminate in small square nodes, and a faint isometric lattice at 6% opacity in the background corners. No blobs, no rounded-rectangle card grid.

Layout. Mobile-first single column, max-width 1120px, 20px gutters at 375px rising to 64px at 1280px. Order: (1) top bar — logo mark + FARHAN J SETUPLY wordmark left, small SOLSCAN text link right; (2) hero — label, oversized stacked headline, subtitle, Indonesian description, left-aligned on desktop with the logo mark bleeding large and low-opacity behind the type on the right; (3) wallet card, centred, the only elevated object on the page, with the address block, then a two-button row (stacked full-width at 375px, side-by-side from 640px), then a divider rule, then the QR tile with its label; (4) footer — single centred hairline-separated block. The address is the visual centre of gravity: it sits directly under the card label at display-data size, not buried under buttons.

Imagery. No stock photography, no 3D renders, no AI-generated crypto art. The only "image" is the QR code itself, treated as the hero artefact: rendered client-side from the exact address string on a pure #FFFFFF tile with #0B0714 modules, 4-module quiet zone, 264px at 375px and 320px on desktop, with four #14F195 corner ticks drawn in the surrounding glass frame — never over the code. Supporting visuals are CSS-only: the horizontal-bar logo mark, hairline neon rules with node squares, a 6% isometric lattice, and the particle field.

Accessibility. Body-size contrast on #0B0714: #FAF5FF ≈ 17.5:1, #B7A7CA ≈ 8.6:1 — both pass AA.

7. Signature Design Concept

The address as display type, framed like a scanner reticle.

The public entry is a dark violet stage, not a centred SaaS hero. The headline MY SOLANA ADDRESS is set at clamp(40px, 9vw, 108px) in Space Grotesk 700, stacked across two lines and occupying roughly 60% of the viewport width on desktop, flush left at the 64px margin — "MY" in #FAF5FF, "SOLANA ADDRESS" filled with a 135° #A855F7 → #E879F9 → #7C3AED gradient. Above it, a 1px #E879F9 rule with a small square node at its left end and the uppercase micro-label SOLANA WALLET PROFILE beneath it in #B7A7CA. Below the headline, the English subtitle in #B7A7CA at 18px and the Indonesian description at 17px, both capped at 52ch. To the right of the type block, bleeding off the top-right edge, the custom three-bar logo mark is scaled to 340px and held at 14% opacity behind a glass pane, so the hero reads as a lit object rather than a banner.

The wallet card begins to appear in the lower third of the first screen on desktop (fully on mobile after one small scroll), glowing #A855F7 at 28% against #0B0714, so the address is visible without hunting. Inside the card, the 44-character public key is set in Space Grotesk 500 at 19–24px with tabular figures directly beneath the SOLANA PUBLIC WALLET ADDRESS label, wrapping into 8-character groups on mobile — the address is the biggest data object on the page, not a footnote under the buttons. The QR tile is framed by four #14F195 corner ticks like a scanner reticle, drawn in the surrounding glass frame and never over the code matrix.

The copy interaction is a ceremony: pressing COPY ADDRESS fills the pill with #A855F7, the label swaps to "COPIED ✓" for 2.4s, a glass toast rises 12px from the card's lower edge reading "Wallet address copied successfully!", and the card border pulses #14F195 once before settling. Hairline neon rules that terminate in small square nodes are used as the section divider between the address block and the QR tile, and again above the footer, so the page reads as one continuous circuit diagram rather than a stack of cards.

No centred stack, no blue button, no gradient blob. The concept only recomposes accepted content, states, and controls.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: layered_2d

Landing Hero Motion Brief

• Focal subject: the oversized stacked headline MY SOLANA ADDRESS with the gradient on "SOLANA ADDRESS", the 1px #E879F9 rule with its square node and the SOLANA WALLET PROFILE micro-label above it, and the large 14%-opacity three-bar logo mark bleeding off the top-right corner behind a glass pane.
• Input → transformation → outcome thesis: as the page loads, the hero type and the ghost logo mark settle into place while the gradient on "SOLANA ADDRESS" drifts slowly across the words; the wallet card then fades and rises into the lower third of the first screen, its #A855F7 glow establishing the address as the page's centre of gravity. The visitor's input is reading and then acting on the address — copy, scan, or open on Solscan — and the outcome is the exact address in hand.
• Motion vocabulary: a 600ms fade+rise entrance for the wallet card via IntersectionObserver; a gradient drift on the headline (background-position shift over 12s, looping); 180ms hover-lift on buttons (translateY(-2px) + glow increase); a 200ms colour/edge flip on the glass card when the cursor is near it; a 2.4s copy toast that slides up 12px and fades, plus a one-shot green pulse on the card border. Nothing bounces, nothing parallaxes the text.
• Composed first frame: dark #0B0714 ground with a #190D2B radial wash top-left and a very low-opacity #7C3AED wash bottom-right; the pink hairline rule and micro-label at the top of the type block; the stacked headline flush left with the gradient already lit on "SOLANA ADDRESS"; the ghost logo mark bleeding off the top-right; the wallet card beginning to appear in the lower third with its purple glow.
• Reduced-motion state: with prefers-reduced-motion, the particle layer, the gradient drift, the card entrance, and the hover-lift are disabled; the page presents a static arrangement with the hero type, the wallet card, the address, the buttons, and the QR code all fully visible and usable.

Phone-cheap motion constraints. One CSS-only particle layer (12–16 absolutely positioned 2–4px dots with translateY/opacity keyframes over 18–28s, will-change: transform, disabled under 768px if prefers-reduced-motion or navigator.hardwareConcurrency <= 4). No WebGL, no canvas particle systems, no scroll-jacked camera moves on mobile. Animations must be light and must not disturb phone performance.

9. Non-Functional Requirements

NFR-1 — Responsive, mobile-first layout (explicit) The page must work well on Android and iPhone, tablet, laptop, and desktop, using a mobile-first approach. The wallet address must be readable and copyable on small screens, and buttons must be comfortably tappable and must not overlap. Rationale: most visitors arrive from TikTok bios and community links on phones.

NFR-2 — Performance and light animation (explicit) Animations must be light and must not disturb phone performance. The page must be optimized for performance. Rationale: the audience is mobile-first and the page must feel premium without costing battery or frame rate.

NFR-3 — Accessibility (explicit) The page must have good accessibility. Rationale: the user explicitly requested accessibility as part of the technical requirements. Body-size contrast on #0B0714 passes AA (#FAF5FF ≈ 17.5:1, #B7A7CA ≈ 8.6:1).

NFR-4 — Clean, reusable code (explicit) The page must be built with reusable components and clean code. Rationale: the user explicitly requested reusable components and clean code for the wallet card, button, logo, and QR generator.

NFR-5 — Functional, not a mockup (explicit) The site must be a genuinely functional landing page, not just a mockup image. The copy address feature, the Solscan link, and the QR code must all work. Rationale: the user explicitly required a working page.

NFR-6 — Exact address integrity (explicit) The wallet address must be displayed exactly as D6HgTwSBn6FLen9asJWUJxZu5mD7P3rJQAzzJLM1WVwv with no character changed, swapped, truncated, or added, and the QR code content must be exactly the same address. Rationale: an incorrect address would send visitors to the wrong on-chain destination.

NFR-7 — QR scannability (explicit) The QR code must be valid and scannable by a Solana wallet, with a white or high-contrast background, and must not be decorative or obstructed by overlays. Rationale: the user explicitly required a scannable, non-decorative QR code.

NFR-8 — Security and privacy (explicit) The website only displays the public wallet address. It must never request, show, or process seed phrases, private keys, passwords, or sensitive data; must not create a fake wallet login form; must not connect a wallet automatically; must not send transactions automatically; must not ask visitors to pay any fee to view the address; must not claim to be the official Solana website; must not display balances, tokens, prices, or fake transactions; and must not create donation or payment features that are not properly integrated. Rationale: explicit hard constraints in the authoritative user evidence.

NFR-9 — External link security (explicit) The VIEW ON SOLSCAN button and the footer Solscan link must open https://solscan.io/account/D6HgTwSBn6FLen9asJWUJxZu5mD7P3rJQAzzJLM1WVwv in a new tab with appropriate security attributes (target="_blank" with rel="noopener noreferrer"). Rationale: explicit user requirement and authoritative reference directive.

NFR-10 — Publishing readiness (explicit) The site must be ready for Builder.io publish/hosting as a one-page site with a public URL enabled, optimized for sharing on TikTok, social bios, and crypto communities. Rationale: explicit user requirement.

NFR-11 — Visual restraint (explicit) The design must not be too busy; it must prioritize an exclusive, clean, professional impression. Rationale: explicit user constraint.

10. Tech Stack

• HTML, CSS, and JavaScript — the user explicitly specified HTML, CSS, and JavaScript or a framework supported by Builder.io. (explicit)
• React or an acceptable Builder.io-compatible framework — permitted by the user's specification; the page must be built with reusable components for the wallet card, button, logo, and QR generator. (explicit)
• Client-side QR generation — the QR code is generated in the browser from the exact address string; no server round-trip is required. (required_inference — the QR code must be valid and encode the exact address, which requires client-side generation from the constant string)
• Clipboard API with a manual-copy fallback — the copy action uses the browser clipboard when available and reveals the address for manual copy when it is not. (explicit)
• Builder.io hosting/publishing — the delivery mechanism for the public URL. (explicit)
• No backend service, database, or authentication — the page is public-key-only, anonymous, and stateless. (explicit — the security constraints prohibit login, wallet connection, and sensitive data handling)

11. Assumptions and Constraints

Assumptions

• The wallet address D6HgTwSBn6FLen9asJWUJxZu5mD7P3rJQAzzJLM1WVwv is the correct and final public address for FARHAN J SETUPLY. (explicit)
• The Solscan account URL https://solscan.io/account/D6HgTwSBn6FLen9asJWUJxZu5mD7P3rJQAzzJLM1WVwv is the correct explorer destination for that address. (explicit)
• The page is delivered as a single public page with no login, no account, and no private state. (explicit — the security constraints prohibit login and sensitive data handling)
• The visitor's browser supports the Clipboard API in the common case; the manual-copy fallback covers the rest. (required_inference — the user explicitly required a fallback when the clipboard is unavailable)

Constraints

• The website only displays the public wallet address. (explicit)
• Do not request seed phrase, private key, password, or any sensitive data. (explicit)
• Do not create a fake wallet login form. (explicit)
• Do not connect a wallet automatically. (explicit)
• Do not send transactions automatically. (explicit)
• Do not ask visitors to pay any fee to view the address. (explicit)
• Do not claim this website is the official Solana website. (explicit)
• Do not display fake balances, tokens, prices, or transactions. (explicit)
• Do not create donation or payment features that are not properly integrated. (explicit)
• Ensure all buttons work. (explicit)
• The wallet address must be displayed exactly as D6HgTwSBn6FLen9asJWUJxZu5mD7P3rJQAzzJLM1WVwv with no character changed, swapped, truncated, or added. (explicit)
• The QR code must be valid and scannable, not decorative, and its content must be exactly the same wallet address. (explicit)
• Do not use another brand's logo as the primary identity. (explicit)
• Animations must be light and must not disturb phone performance. (explicit)
• The design must not be too busy; prioritize an exclusive, clean, professional impression. (explicit)
• Use a mobile-first approach; the wallet address must be readable and copyable on small screens and buttons must be comfortably tappable and not overlap. (explicit)

Presentation defaults (Default — not specified by user)

• The specific font families (Space Grotesk for headings, Manrope for body) and the modular type scale are supplied by the creative direction, not by the user; the user specified only "modern, bold, elegant typography."
• The exact particle count, animation durations, and easing curves are supplied by the creative direction, not by the user; the user specified only "slowly moving purple light particles" and "light" animation.

12. Glossary

• Solana — the public blockchain network on which the wallet address exists.
• Wallet address / public key — the public identifier D6HgTwSBn6FLen9asJWUJxZu5mD7P3rJQAzzJLM1WVwv that visitors can view, copy, scan, or open on Solscan. It is public and safe to share.
• Seed phrase / private key — secret credentials that control a wallet. The page must never request, show, or process them.
• Solscan — the external blockchain explorer at https://solscan.io/account/D6HgTwSBn6FLen9asJWUJxZu5mD7P3rJQAzzJLM1WVwv where the address can be inspected. It is a third-party destination, not owned by this product.
• QR code — a scannable two-dimensional code generated from the exact wallet address so a Solana wallet can read it without typing.
• Glassmorphism — the frosted-glass surface treatment used for the wallet card: translucent fill, backdrop blur, 1px translucent border, inner top highlight, and soft outer glow.
• Builder.io — the platform whose hosting/publishing feature delivers the page's public URL.
• Mobile-first — a design approach that starts from the smallest screen and scales up to tablet, laptop, and desktop.
• CA address — the wallet address referred to in the user's desired end result; in this document it is the public Solana wallet address D6HgTwSBn6FLen9asJWUJxZu5mD7P3rJQAzzJLM1WVwv.