Rainfall Custom Assets

Overview

Rainfall Digital connects brands with customers by blending the physical and digital worlds. Their platform enables secure, authentic experiences through blockchain verification — a physical item can be scanned with a phone and instantly validated, displaying a verification page with the product's journey and provenance.

The default Rainfall verification view displays all assets uniformly. But premium collectibles deserve more than a generic template.

Custom Assets use the Rainfall API to create beautiful, branded experiences that highlight content in ways optimized for each asset type.

The Challenge

Each verified asset tells a different story. A signed tennis racket has different content than a limited edition t-shirt or a commissioned painting. Yet the default verification view treated all content identically:

• Same layout for all asset types
• No consideration for content hierarchy
• Generic presentation that diluted brand identity
• Media displayed without context or narrative flow

The technical infrastructure was solid. What needed refinement was how the verification experience felt to users.

Strategic Approach

Rather than building one flexible template, we designed three distinct experiences — each optimized for its specific content type and brand aesthetic.

The goal: make each verification feel like a premium unboxing moment, not a database lookup.

Venus Williams Signed Racket

The Wilson Blade 104 signed by Venus Williams is a premium collectible with beautiful photography but limited metadata. The challenge was creating a luxury feel without overwhelming the minimal content.

Design Decisions

• Animated Signature Overlay: Venus Williams' signature draws itself on screen using SVG stroke animation — a multi-phase sequence that feels like watching an autograph happen live
• Hero Image Slideshow: Product and event photography cycle automatically, with the signature animation reappearing on each transition
• Compact Content Container: Asset details are contained in a small, elegant card that doesn't fight with the imagery
• Luxury Typography: Instrument Serif font reinforces the premium, collectible nature of the item

The result feels like a boutique gallery experience rather than a verification page.

Black Radio X Unknown Union Tee

The Robert Glasper collaboration t-shirt has rich media content — multiple events, behind-the-scenes footage, and concert photography. This asset needed energy and edge to match the streetwear aesthetic.

Design Decisions

• Bold Dark Theme: Black background with white text creates high contrast and streetwear energy
• Glitch Animation: The product image uses a complex keyframe animation with hue rotations and scale transforms — a 5-second loop that's 20% glitch, 80% stable
• Timeline View: Multiple media pieces display in a vertical timeline, the optimal format for chronological event content
• Scroll-Triggered Animations: Content sections slide up as users scroll, creating momentum and discovery
• Rotating Authentication Badge: A circular SVG text path rotates continuously, adding subtle motion without distraction

The experience matches the energy of a concert afterparty — bold, dynamic, and memorable.

Tom Brady G.O.A.T. Series Painting

The Lexie Johnson Art painting required a gallery aesthetic — minimal, refined, with the artwork commanding attention. But the creation story was equally important: time-lapse videos showing the painting's progress from sketch to completion.

Design Decisions

• Gallery-Inspired Layout: Clean, minimal interface that puts the artwork front and center with generous white space
• Instagram Stories-Style Carousel: The creation story swipes horizontally like Instagram stories — familiar, intuitive, and perfect for sequential video content
• Reversed Timeline: Progress videos display newest-first, telling the story from completion back to sketch — the most compelling narrative order for artistic process
• Two-View System: Users toggle between Details View (artwork + attributes) and Creation Story (swipeable video carousel)
• Touch and Mouse Support: Swipe gestures work on mobile; mouse drag works on desktop with momentum dampening

The experience feels like walking through a private gallery with the artist narrating the journey.

Technical Implementation

All three experiences share a common architecture while maintaining complete design autonomy:

• Dynamic Brand Resolution: A brand registry maps merchant slugs to custom component folders
• API-Driven Content: Asset data pulls from Rainfall's REST API with fallback to static JSON
• Code Splitting: Next.js dynamic imports ensure each brand loads only its required code
• IntersectionObserver: Animations trigger based on viewport visibility — no wasted performance
• Mobile-First: All touch interactions work seamlessly; desktop gets enhanced mouse support

This architecture makes onboarding new brands simple — each just needs a folder with a custom VerifyPage component.

What Was Delivered

1. Three Production-Ready Custom Assets

Complete, responsive implementations for each brand aesthetic:

• Venus Williams: Luxury collectible with signature animation
• Robert Glasper: Streetwear energy with glitch effects and timeline
• Lexie Johnson Art: Gallery minimal with swipeable creation story

2. Scalable Architecture

A brand registry system that allows new custom assets to be added without touching core infrastructure.

3. Comparison Pages

Side-by-side views showing default vs. custom experiences, demonstrating the value of branded verification.

Each verification now feels like a moment of discovery rather than a transaction. The blockchain technology stays invisible while the brand story takes center stage.