The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
π€ Encore β Your Sound, Verified
A concept demo built for the artist/fan/venue platform brief
π What This Is
Encore is a front-end concept demo β a single-page, mobile-first web experience designed to show how the platform described in the brief could feel to use. It's not just a mockup of screens; it's a working, interactive build: real animation, real 3D motion, real responsive layout, all in the browser.
The goal wasn't to illustrate "a music app." It was to design around the actual problem stated in the brief: AI and infinite streaming have flooded the market, and the one thing that can't be faked is a room full of real people who showed up for one specific artist. Every design decision traces back to that idea.
π― The Core Idea (Signature Concept)
The centerpiece of the whole design is a simple visual metaphor:
Noise β Signature
On page load, the hero section shows a waveform made of random, chaotic bars β representing the flood of AI-generated tracks. Over about 2 seconds, it smoothly resolves into a clean, deliberate waveform shape β representing a real artist's identity emerging from the noise. This one animation is the pitch: your sound survives the flood because it's yours.
That same idea β human signal standing out against synthetic noise β is echoed quietly throughout: in the copy, in the "verified" badges, and in the rotating light-ray silhouette behind the hero text.
π¨ Design System
Color palette (named, not generic defaults):
#0E0B12 Stage β near-black background, like a dim venue
#161019 Stage 2 β slightly lifted panel background
#1F1826 Card β surface color for cards/passes
#FFB84D Amber β warm spotlight accent
#B24BF3 Violet β electric stage-light accent
#F5F0EB Paper β main text color
#6EE7A8 Green β small "verified/confirmed" indicator only
Typography (three roles, chosen for character, not defaults):
Fraunces (serif) β headlines. Warm, a little vintage, feels human rather than corporate
Inter (sans) β body copy. Clean, highly readable at small sizes
IBM Plex Mono β tags, roles, timestamps, eyebrows. Gives a "verified/technical" feel to labels like CONFIRMED Β· MOBILE
Layout logic: every section either shows the brief's real content (roles, event lifecycle) or reinforces the noiseβsignature theme. Nothing decorative was added just to fill space.
𧩠Section-by-Section Breakdown
π§ Nav β sticky, blurred glass background, quick links + waitlist CTA
ποΈ Hero β the noiseβsignature waveform animation, headline built directly from the brief's own stat (750k tracks/day, 400k AI-made), rotating light-ray performer silhouette as ambient background
π The Problem β three animated counting stats (53%, 750k, ~1%) pulled straight from the brief's numbers, plus one closing line of copy
π« Who's In (Roles) β three "backstage pass" style cards for Fan (guest β registered β confirmed), Artist (approved, Stripe-connected β marked as the core role), and Local Business (approved, Stripe-connected). Each tilts in 3D toward the cursor
π Before / During / After β the real event lifecycle from the brief, shown as a genuine numbered sequence (this is the one place numbering is justified, since order actually matters here)
π Real People, Real Rooms β a horizontally scrollable roster of fictional artist cards (unique gradient avatars, genre, city) β social proof without using anyone's real photo or name
π± The App β a tilting phone mockup showing what a confirmed fan actually sees: artist card, live "audio bars," setlist voting, check-in button
ποΈ Footer β simple sign-off
π οΈ What's Actually Used (Tech Stack)
HTML5 β semantic structure, no frameworks
CSS3 β custom properties (CSS variables) for the whole color system, Flexbox layout, clamp() for fluid type scaling, CSS mask-image for the fading carousel edges, keyframe animations
Vanilla JavaScript β no libraries, no build step:
<canvas> + requestAnimationFrame for the waveform animation
IntersectionObserver for scroll-triggered stat counters and section reveals
Mouse-position math for the 3D tilt effect on cards and the phone
Inline SVG β the hero performer silhouette and light rays, hand-built, no external image files
Google Fonts β Fraunces, Inter, IBM Plex Mono
No dependencies, no npm install, no server required β it's three files (index.html, style.css, script.js) that run with a static file server like VS Code's Live Server.
β¨ Motion & Interaction Details
π Hero waveform: chaos β order animation on load, then idles with a gentle breathing motion
π’ Stats count up from 0 the moment they scroll into view
π Role cards & artist cards tilt in 3D toward the cursor, and lift slightly on hover
π² Phone mockup tilts in full 3D based on cursor position β sells the "real device" feeling
π Background light rays rotate slowly and continuously β ambient, not distracting
πͺ Sections fade/slide in as you scroll, instead of appearing all at once
You can check out my project live here: https://encore-demo-saifullah.netlify.app
It is mobile and web-based.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
no-code.supply is open.
I've been quietly building landing page templates. Six are out today, each with its own brand, its own type pairing and one interaction it's built around:
β Aurel: a skincare brand with a WebGL serum drop that bulges toward your cursor
β Ferro Type: a type foundry where the hero word bends its weight and width under the pointer
β Meridian Expeditions: contour maps that redraw themselves as you switch routes
β Oda: an architecture studio whose timber cabin draws itself, with a live sun study
β Relay: a dev tool where the editor types a workflow and the run graph executes it live
β Signal: a mission-control SaaS with a live infrastructure graph that contains threats as they flare
Built to be edited with AI. Every template ships with a README, a DESIGN.md and an AGENTS.md, so Claude, Cursor or whatever assistant you use changes it the way it was built, not the way it guesses.
Pricing, per template:
β’ HTML: $29
β’ React: $59
β’ Bundle (HTML + React): $79
Or get All-Access for $169: all six templates, both editions, plus every future drop. Nine more are on the way, at no extra cost.
No page builder, no lock-in, no third-party requests.
If you build sites for clients, I'd love to hear which one you'd use first.
Ferro Type is the one I would open first. Bending a variable font under the pointer re-lays out the text every frame, which is a much bigger bill than it looks, and stepping the weight in a few fixed increments is usually what keeps it smooth on a laptop that is not plugged in....
Built this Framer site from scratch.
The interesting part wasn't the design.
It was building this team section with a flipping interaction and full-card expansion on hover.
Here's the final result.
Really good section with amazing transitions.
Great job Rokas!π
β’ Sep 26
From problem to polished product.
I started by identifying the UX problems, then refined the same product through better structure, hierarchy, spacinga navigation, and interactions making the experience clearersimpler, and easier to use.
1 voted
50%
1 voted
50%
2 votes
Closed