Professional Lottie Brand Animation
Budget: €8 – €30 EUR
1 Visual Concept
Zone Idea Notes
Background Dynamic “Neon Orbit” gradient that very slowly pans (20 s loop) from midnight-navy ➜ deep indigo ➜ Tendr green. 3-stop radial on WebGL canvas; CPU-cheap fallback = static CSS gradient.
Hero object 3-D wireframe ring (think thin torus) seeded with animated nodes. Each node = real tender source (Gov, Defence, Utilities, etc.). Renders via Three.js; nodes light up and orbit towards centre on scroll.
Centrepiece At the ring’s core: a glassy card with Tendr logo; as nodes touch it, the logo emits a subtle pulse → symbolises ingestion & normalisation. Glassmorphism blur (backdrop-filter 8 px).
Particle accents Tiny mint particles drift toward the ring to give a “data-flow” vibe. Disable when prefers-reduced-motion.
2 Layout (12-column grid, 1440 px max)
objectivec
Copy
Edit
┌──────────────────────────────────────────────┬────────────────────┐
│ col 1-6 │ col 7-12 │
│ │ │
│ Headline & copy │ 3-D canvas │
│ CTAs │ │
│ │ │
└──────────────────────────────────────────────┴────────────────────┘
Mobile breakpoint (≤ 768 px) → stack: headline first, 3-D canvas scales to 320 px height, CTAs follow.
3 Copy & Typographic Scale
Element Copy Style
Eyebrow AI-powered tender intelligence Inter 600, 14 / 20 px, uppercase, tracking 0.08 em, Tendr green.
Headline “Win the tenders that move your business.” Inter 700, clamp(32–64 px), 100 % lh, white.
Sub-headline “Compare RFPs instantly, surface hidden risk and submit with confidence.” Inter 400, 18 / 28 px, 85 % white.
Primary CTA Browse live tenders → arrow-right icon Filled green #28C66F, 16 / 16, 600.
Secondary CTA Book a demo Transparent + 2 px green stroke, white text.
Typed-cursor effect drops industry names into the headline (Legal, Construction, Healthcare, Defence, ICT). Cursor colour = green.
4 Colour & Effects
Token Hex Usage
Midnight Navy #0B1F4A Canvas far corners, text contrast.
Indigo #152A79 Gradient mid-stop.
Tendr Green #28C66F CTAs, active nodes, cursor text.
Mint Accent #3AD6B0 Particle glow, hover outlines.
Alert Red #FF645C Error states (not used in hero).
Shadow elevation: rgba(0,0,0,0.35) 0 8 24 px.
5 Motion & Interaction (all at 60 fps budget)
Element Animation Duration
Orbit ring Slow 360° rotation 25 s loop
Nodes Ease-in cubic bezier along spline to core when they hit viewport centre (staggered) 0.8 s each
Logo pulse Scale 1 → 1.08, opacity 1 → 0.4 then back 0.6 s
Scroll cue Down-chevron yoyo up/down 8 px 1.8 s
CTAs Hover lift +2 px, shadow intensifies 150 ms
Disable all transforms and replace with fade-ins if prefers-reduced-motion.
6 Accessibility & Performance
WCAG AA: white text on navy ≥ 7.3:1 contrast; green on navy ≥ 4.8:1.
Live regions: announce typed-cursor changes via aria-live="polite" span.
<canvas> labelled with aria-label="Animated diagram: data sources feeding Tendr platform".
Defer Three.js, lazy-load 3-D assets with IntersectionObserver.
3-D bundle ≤ 120 kB gzipped; hero total blocking time < 150 ms on iPhone 8.
7 Deliverables for Build
Figma file – desktop & mobile frames, component tokens.
Three.js scene (RingScene.js) with exportable config JSON (number of nodes, orbit speed).
SVG icon set (logo, arrow, chevron).
CSS variables for colour and spacing.
React component HeroSection.jsx (or vanilla HTML/CSS/JS) with typed-cursor & motion hooks.
Zone Idea Notes
Background Dynamic “Neon Orbit” gradient that very slowly pans (20 s loop) from midnight-navy ➜ deep indigo ➜ Tendr green. 3-stop radial on WebGL canvas; CPU-cheap fallback = static CSS gradient.
Hero object 3-D wireframe ring (think thin torus) seeded with animated nodes. Each node = real tender source (Gov, Defence, Utilities, etc.). Renders via Three.js; nodes light up and orbit towards centre on scroll.
Centrepiece At the ring’s core: a glassy card with Tendr logo; as nodes touch it, the logo emits a subtle pulse → symbolises ingestion & normalisation. Glassmorphism blur (backdrop-filter 8 px).
Particle accents Tiny mint particles drift toward the ring to give a “data-flow” vibe. Disable when prefers-reduced-motion.
2 Layout (12-column grid, 1440 px max)
objectivec
Copy
Edit
┌──────────────────────────────────────────────┬────────────────────┐
│ col 1-6 │ col 7-12 │
│ │ │
│ Headline & copy │ 3-D canvas │
│ CTAs │ │
│ │ │
└──────────────────────────────────────────────┴────────────────────┘
Mobile breakpoint (≤ 768 px) → stack: headline first, 3-D canvas scales to 320 px height, CTAs follow.
3 Copy & Typographic Scale
Element Copy Style
Eyebrow AI-powered tender intelligence Inter 600, 14 / 20 px, uppercase, tracking 0.08 em, Tendr green.
Headline “Win the tenders that move your business.” Inter 700, clamp(32–64 px), 100 % lh, white.
Sub-headline “Compare RFPs instantly, surface hidden risk and submit with confidence.” Inter 400, 18 / 28 px, 85 % white.
Primary CTA Browse live tenders → arrow-right icon Filled green #28C66F, 16 / 16, 600.
Secondary CTA Book a demo Transparent + 2 px green stroke, white text.
Typed-cursor effect drops industry names into the headline (Legal, Construction, Healthcare, Defence, ICT). Cursor colour = green.
4 Colour & Effects
Token Hex Usage
Midnight Navy #0B1F4A Canvas far corners, text contrast.
Indigo #152A79 Gradient mid-stop.
Tendr Green #28C66F CTAs, active nodes, cursor text.
Mint Accent #3AD6B0 Particle glow, hover outlines.
Alert Red #FF645C Error states (not used in hero).
Shadow elevation: rgba(0,0,0,0.35) 0 8 24 px.
5 Motion & Interaction (all at 60 fps budget)
Element Animation Duration
Orbit ring Slow 360° rotation 25 s loop
Nodes Ease-in cubic bezier along spline to core when they hit viewport centre (staggered) 0.8 s each
Logo pulse Scale 1 → 1.08, opacity 1 → 0.4 then back 0.6 s
Scroll cue Down-chevron yoyo up/down 8 px 1.8 s
CTAs Hover lift +2 px, shadow intensifies 150 ms
Disable all transforms and replace with fade-ins if prefers-reduced-motion.
6 Accessibility & Performance
WCAG AA: white text on navy ≥ 7.3:1 contrast; green on navy ≥ 4.8:1.
Live regions: announce typed-cursor changes via aria-live="polite" span.
<canvas> labelled with aria-label="Animated diagram: data sources feeding Tendr platform".
Defer Three.js, lazy-load 3-D assets with IntersectionObserver.
3-D bundle ≤ 120 kB gzipped; hero total blocking time < 150 ms on iPhone 8.
7 Deliverables for Build
Figma file – desktop & mobile frames, component tokens.
Three.js scene (RingScene.js) with exportable config JSON (number of nodes, orbit speed).
SVG icon set (logo, arrow, chevron).
CSS variables for colour and spacing.
React component HeroSection.jsx (or vanilla HTML/CSS/JS) with typed-cursor & motion hooks.