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
Redesigned the loading screen of my portfolio ✨ I wanted the first second of the site to feel like an introduction, not a wait.
→ An "SS" monogram drawn inside an amber ring with an orbiting dot
→ My name types itself out in serif italic, with a blinking cursor
→ A terminal-style status line: "Loading Sujay's story..."
→ It flows straight into the hero, where a code window types new Developer() and the stats count up
Warm near-black, a single amber accent, and serif + monospace type, because my work sits between design and code. Live at sujay-singh.vercel.app
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
Every AI app makes you wait. Most show a boring spinner.
So I made a free "AI Generating" loading screen template. Swap the logo, image, text and colors.
Built with the SVGator MCP, and edited in the SVGator.
I learned that I can keep prompting in any coding agent and edit the animation too! Very cool!
AI saas hero section design done in figma.
The web, ready for your agents is a strong hero line, and pairing it with that painterly landscape scene is an unexpected but memorable visual choice. Showing the AI prompt in context right in the hero makes the product feel instantly real.
A 22-second brand intro where your logo is the hero: a toggle switches it on, it sparks through a lens of words, then cuts into a fast photo montage and lands on your logo lockup. Every brand-specific piece is one clearly named layer, so making it yours takes minutes. In the proof video the same project turns from Oliviera (AI automation) into Obaley (productivity app).
How to make it yours
• Logo: replace logo-image once and it updates in all four appearances (knob, flight, spark, final lockup).
• Colour: set hue-rotate on intro-theme to recolour the whole intro; the background layers set the base colour.
• Text: all live, editable text in Inter and League Gothic (free, SIL OFL). Headlines use one letter per layer, and the wordmark is logo-wordmark.
• Photos: photo-01 to photo-21, image slots that are cropped to fill, so any aspect ratio works.
• Every layer has a semantic kebab-case name (scene-01-prompt-toggle … scene-12-cta, headline-, photo-, logo).
Built with the SVGator MCP
The template was generated and refined layer by layer through the SVGator MCP, from the keyframes to the 300+ semantic layer names. The second brand (copy, letter layout, colours and photos) was also applied through the MCP.
Assets
Fonts are SIL OFL. Demo photos are CC0 from StockSnap via Openverse. Oliviera and Obaley are demo brands; swap in your own.
#svgatorchallenge