Terug naar presentaties

Slide componenten · Yellowgrape

Geanimeerde building blocks

Plug-and-play HTML/CSS modules om snel een Yellowgrape-presentatie op te bouwen. Live previews hieronder, kopieer de code en plak het in een nieuwe slide in deck.html. Alles gebruikt de bestaande design tokens, dus styling werkt direct.

Conversie groei · 90 dagen

0 %

Voorbeeld-resultaat. Vervang het cijfer en label.

Stat · count-up
Animated KPI counter

Grote cijfer telt op van 0 naar de target-waarde bij in-view. Gele halo ademt subtiel mee.

Background · data viz
Data pulse grid

Dot-matrix die willekeurig gele pulsen toont. Ideaal als achtergrond voor AI- en data-slides.

Verkeer100%
Bekeken product42%
In winkelmand19%
Aankoop8%
Diagram · AIDA
Conversion funnel

Vier balken die sequentieel "scale-x" in animeren, met gele highlight op de eindstap.

yg $ analyse --period 90d → 1.247.892 sessies verwerkt → 23 groeikansen gedetecteerd ★ checkout flow · +14% potentieel ★ search relevance · +9% potentieel yg $
UI mockup · CLI
Terminal data feed

Mac-style terminal met regel-voor-regel typing animation en knipperende gele cursor.

Strategy
92%
Data
71%
Campagne
58%
Automation
38%
AI
22%
Chart · capability
Animated bar chart

Horizontale balken die staggered op breedte animeren. Gele fill + zwart endcap voor sterke leesbaarheid.

Data-driven growth AI acceleration Full-funnel No fluff Strategy & execution Predictable growth Data-driven growth AI acceleration Full-funnel No fluff Strategy & execution Predictable growth
Yellowgrape E-commerce Mastery Pioneers Curious Crystal clear Yellowgrape E-commerce Mastery Pioneers Curious Crystal clear
Text · motion
Marquee statement strip

Twee scrollende strips (links/rechts) met afwisselend witte en gele woorden. Strong brand-feel.

MASTERY

Text · effect
Glitch text

RGB-split glitch effect met scanlines. Voor dramatische opening statements.

3D · stack
Isometric layer stack

Vier 3D-getilte lagen die sequentieel omhoog komen. Voor data-stack of architecture-slides.

To do

  • Data audit
  • Meetplan
  • Funnel optimalisatie
  • AI-acceleratie
Editorial · handwritten
Notebook parchment

Papier-textuur, handgeschreven script (Caveat) en gele highlighter-onderlijn. Speels & menselijk.

Live revenue
€ 1.247.892
Vandaag · + €42.118 t.o.v. gisteren
Stat · live
Live revenue ticker

Cijfer tikt op met kleine fluctuaties + pulserende activity-dot. Voor dashboards/case-resultaten.

DATA CRM CONTENT ADS UX AI
Diagram · network
AI network nodes

Center-node (geel, glow) met satellites + pulse-rings. Verbindingen flowen met dashed stroke-animatie.

Data viz · activity
Activity heatmap

Grid met 4 intensiteit-niveaus die per cel inschalen. Voor cohort-, retentie- of activity-data.

73% share
73% mobile
27% desktop
Chart · ring
Donut chart

SVG ring die zich vult via stroke-dashoffset. Percentage groot in het midden, legenda ernaast.

AI · prompt
Analyseer onze checkout-flow en geef 3 quick wins.
UI mockup · AI
AI prompt typewriter

ChatGPT-style prompt-box met loop-typing animatie + knipperende cursor. Voor AI-tooling slides.

Sessies / week 12.4K
+18%
MADIWODOVRZAZO
Chart · inline
Sparkline metrics

Mini-grafiekjes naast KPIs. Lijn tekent zich in (dasharray), gele fill fadet erna in.

Populair Growth
€4.500/mnd
  • Strategy & roadmap
  • Full-funnel campagnes
  • Automation & lifecycle
  • AI growth-acceleratie
Card · pricing
Pricing card

Service-card met badge, prijs en feature-lijst. Items fade-in van links sequentieel.

Yellowgrape · presentatie

AI-driven e‑commerce agency

Text · gradient
AI-driven gradient

Bewegende geel→oranje→roze→magenta gradient op tekst, exact zoals de brandbook hero. Voor opening- of statement-slides.

Predictable growth
voor e‑commerce.

Background · atmospheric
Gradient mesh

Vloeiende kleur-orbs die langzaam bewegen (blur + transform). Voor hero/title slides met sfeer.

Running
Live
Users
Eddo
Total
2.4M
Background · glassmorphic
Glass layers

Overlappende semi-transparante kaarten met backdrop-blur op een kleurige gradient. Voor dashboards en hero-secties.

agentic
Text · kinetic
Kinetic type

Elke letter eigen kleur + jump-animatie, met afwisselende italics. Voor playful headers en concept-slides.

REC 00:45

“ship the landing page”

UI mockup · voice
Voice waveform

Live recording UI met pulserend REC-indicator, geanimeerde gele waveform-bars en transcript onderaan.

r = 0.87 strong
Chart · correlation
Scatter + trendline

Correlatie-plot met SVG-dots die fade-in en een dashed gele trendlijn die zich tekent.

EDIT FORMAT LINT COMMIT
Diagram · flow
Process pipeline

Edit → Format/Lint → Commit flow met sequentiële node-reveals en dashed flowlines. Voor proces-slides.

@@ -14,6 +14,7 @@   app/page.tsx
 function Hero() { - const title = 'Hello' + const title = 'Ship in minutes' + const cta = 'Try the agent'   return <h1>{title}</h1>  }
UI mockup · diff
Code diff

Git-style diff met rode −/groene + regels, regel-voor-regel reveal. Voor changelog- of AI-output slides.

9.4h/day The unlock
3.1M1
4.8M2
4.2M3
6.5M4
9.4M5
Chart · highlighted
The unlock bars

Vijf verticale balken die sequentieel omhoog groeien. Laatste is geel met glow + badge — voor het "aha"-moment.

Chat
Tasks
Diff
UI mockup · tabs
Segmented tabs

Drie tabs met actieve-state pop, skeleton-rijen erna die sequentieel inflowen. Voor UI-/app-mockup slides.

Code gekopieerd naar klembord