New: Tristorm Framework v2.0 is live Read the announcement
Section Library / Cluster 09

Descriptive

Reusable content blocks that pair visuals with explanatory text. The workhorses of landing pages — used to explain features, showcase product UI, and build understanding before the conversion ask.

DESC-01

Hero Image + Feature Columns

P Purpose

Anchors a section with a single visual — a product screenshot, diagram, or abstract image — then immediately supports it with three key takeaways. The structure creates hierarchy: the image earns attention, the columns deliver substance. Ideal for "what makes us different" or "how it works" sections.

W When to Use

  • Service or product pages — introducing a key capability with visual proof
  • Homepage mid-section — "What makes Vstorm different" or "How TriStorm works"
  • After a hero opener — as the first deep-dive section with supporting detail
  • When you need to show one thing and explain three aspects of it
  • Funnel stage: Consideration — visitor is learning how you work, not yet deciding

I Required Inputs

  • overline — optional mono-text label (e.g. "How It Works")
  • headline — max 50 chars, centered
  • subline — 1–2 sentences, centered, max 540px
  • imageSrc — 16:9 product screenshot, diagram, or abstract visual
  • columns (3) — each: icon (SVG 20×20), title (max 30 chars), body (1–2 sentences)

! Do Not

  • Use more than 3 feature columns — this isn't a grid, it's a triad
  • Put a stock photo in the image area — use product UI, diagrams, or brand gradients
  • Write feature titles longer than 30 characters — they should scan instantly
  • Repeat this layout more than once on the same page — it loses impact
  • Put a heavy CTA here — this is an explanation section, not a conversion section

V Variants

  • Light (default) — white/snow background. Clean, works on most pages
  • Dark — ink background. Premium feel, good for "differentiator" sections

F Typical Page Flow

  • After: Hero or opening statement
  • Before: Services Grid, Case Studies, or a second descriptive block
  • On homepage: 2nd or 3rd section, after the hero
  • On service pages: opening explanatory section
Live Preview
How It Works

What makes TriStorm different

Not just faster — fundamentally different. A methodology built for mid-market teams that need production AI, not PowerPoint.

Parallel workstreams
Each phase runs independently with full context. No waiting for handoffs — discovery, build, and validation overlap where it matters.
Fresh context per agent
Every sub-task starts with a clean slate. No context pollution, no hallucination drift. Consistent, thorough analysis at any scale.
Centralized orchestration
One control plane distributes tasks and collects results. Sub-processes never talk to each other — preventing drift and reducing failure modes.
DESC-02

Tabbed 50/50 Split

P Purpose

Walks visitors through multiple features or capabilities without leaving the section. The tab interface keeps the page compact while letting each capability breathe with its own title, description, and visual. The 50/50 layout balances explanation with proof — text earns trust, the image confirms it.

W When to Use

  • Service pages — walking through 3–6 related capabilities without vertical sprawl
  • Product tour sections — showing different views or modes of a tool
  • Homepage mid-section — "What we do" when you have 3+ services to showcase
  • When each item deserves its own screenshot but stacking would make the page too long
  • Funnel stage: Consideration to Decision — visitor is evaluating specific capabilities

I Required Inputs

  • tabs (3–6) — label for each pill (max 20 chars per tab)
  • Per tab — overline (optional), title (max 60 chars), desc (2–3 sentences), image
  • Navigation — Prev/Next arrows are auto-generated from tab count

! Do Not

  • Use more than 6 tabs — cognitive overload, split into two sections instead
  • Use fewer than 3 tabs — use Simple 50/50 (DESC-03) instead
  • Put long descriptions in tabs — this is overview territory, link to detail pages
  • Mix unrelated capabilities — each tab set should have a coherent theme
  • Skip the screenshots — text-only tabs feel empty in a 50/50 layout
  • Add CTAs inside individual tabs — one CTA per section max, below the card

V Variants

  • With Prev/Next (default) — snow background, white card, pills centered, bottom bar with arrow navigation

F Typical Page Flow

  • After: Hero, Hero Image + Features (DESC-01), or opening section
  • Before: Case Studies, Testimonials, or CTA Ending
  • On service pages: the primary capability showcase
  • On homepage: mid-page, after the "what makes us different" section
Live Preview
Process Automation
Turn repetitive workflows into self-running systems
Identify high-volume, rule-heavy processes and replace manual steps with AI agents that handle exceptions, escalate edge cases, and learn from corrections.
DESC-03

Simple 50/50 Image + Text

P Purpose

The simplest descriptive block: half image, half text. No tabs, no columns — just one idea explained clearly with visual support. The soft CTA (arrow link) invites deeper exploration without the pressure of a button. Alternating image-left / image-right rows create rhythm down the page.

W When to Use

  • Landing pages — explain 2–3 key benefits, one per row, alternating layout
  • Service detail pages — pair each capability with a visual
  • About pages — team philosophy or methodology explanations
  • When a single idea needs room to breathe without competing with other content
  • Funnel stage: Awareness to Consideration — visitor is scanning, building understanding

I Required Inputs

  • rows[] — 2–3 rows, each: overline (optional), title, desc (2–3 sentences), ctaText, image
  • reverse — boolean per row, flips to image-right / text-left
  • image — 4:3 screenshot, illustration, or brand gradient

! Do Not

  • Stack more than 3 rows — break up with a different section type after
  • Use the same layout direction for consecutive rows — alternate to create rhythm
  • Put a primary button here — the soft CTA is intentional, keep it low-pressure
  • Use for 4+ features — use DESC-01 or DESC-02 instead
  • Write more than 3 sentences in the description — brevity earns the click

V Variants

  • Alternating Stack (default) — 2–3 rows with alternating image/text sides. Creates narrative flow down the page

F Typical Page Flow

  • After: Hero, DESC-01, or social proof
  • Before: Case Studies, DESC-02, CTA Ending, or FAQ
  • On landing pages: the middle narrative — one row per benefit
  • On service pages: after the overview, before the detail grid
Live Preview
Discovery
We map your operations before we touch a line of code
The first week is interviews, process mapping, and data audits. We find the workflows where AI agents will have the highest impact per dollar.
See how discovery works ↗
Build
Production-grade agents deployed in weeks
We build incrementally — one workflow at a time. Each agent ships with monitoring, fallbacks, and clear ownership. Your team isn't locked out; they're trained in.
Explore our build process ↗
Optimize
Measure everything, compound the gains
Post-launch, we instrument and iterate. Dashboards show agent performance in real time. We identify the next automation opportunity while the first one is still paying for itself.
Learn about ongoing support ↗
DESC-04

Stats Row

P Purpose

Social proof through numbers. A row of 3–4 key statistics that count up on scroll and lift subtly on hover. These anchor credibility — the visitor doesn't need to read your copy if the numbers speak for themselves.

W When to Use

  • After the hero or opening section — immediate credibility
  • Between narrative sections as a visual breather with proof
  • On case study pages — outcomes at a glance
  • Funnel stage: Awareness to Decision — numbers work at every stage

I Required Inputs

  • stats[] (3–4) — each: countTo (number string), suffix (%, +, x, M), label (1 short sentence)
  • variant — "header" (with overline/title/subtitle) or "numbers" (stats only)
  • overline / headline / subtitle — used in "header" variant only

! Do Not

  • Use more than 4 stats — dilutes impact
  • Use vague numbers — "100+" is weaker than "127"
  • Mix unrelated metrics — keep them thematically coherent
  • Color the suffix red — it is intentionally grey/lighter
  • Use without real data — placeholder stats erode trust

V Variants

  • With Header — overline + title + subtitle above the stats row. Use for standalone sections
  • Numbers Only — just the stats row with dividers. Use as a compact breather between content

F Typical Page Flow

  • After: Hero, Client Logos, or opening section
  • Before: Services, Descriptive sections, or Case Studies
  • Works as a standalone divider between heavier content blocks
Live Preview
By the Numbers

Results that compound

Across every engagement, the pattern holds — less manual work, faster throughput, measurable ROI.

0 +
Production agents deployed across mid-market companies
0 %
Average reduction in manual processing time
0
Weeks from kickoff to first agent in production
0 x
Average ROI within the first year of deployment
DESC-05

Cards

P Purpose

Modular blocks for communicating distinct advantages, recognition items, or differentiators. Each card stands on its own but gains weight from the group. The hover lift creates tactile feedback without distraction.

W When to Use

  • Homepage — "Why Vstorm" or "Our advantages" section
  • About pages — awards, certifications, partnerships
  • Service pages — key benefits of a specific offering
  • When you have 3–4 distinct, parallel points that deserve equal weight

I Required Inputs

  • overline / headline / subtitle — centered section header
  • cards[] (3–4) — each: icon (SVG 20×20) or logoDot (CSS color), title (max 30 chars), desc (1–2 sentences)
  • variant — standard, accent, logo, or logotype
  • cols — override column count (default: 3 or 4)

! Do Not

  • Use more than 4 cards — it becomes a grid, not a statement
  • Mix card types (some with icons, some without) — keep them parallel
  • Write descriptions longer than 2 sentences — cards are for scanning
  • Put CTAs inside cards unless they link to distinct destinations

V Variants

  • Standard — white cards with border and hover shadow
  • Accent Top — 2px red top border per card. Stronger visual punch
  • With Logos — replaces icon with partner/recognition logo image. Greyscale → color on hover
  • Logotype — prominent logo on dark background + compact text body. Use only for well-known brands

F Typical Page Flow

  • After: Hero, Stats Row, or opening narrative
  • Before: Case Studies, DESC-02, or CTA Ending
  • Works well on a snow background to separate from white sections above/below
Live Preview
Why Vstorm

What sets us apart

Production-first mindset
Every engagement ships working software. No decks, no "phase 2 recommendations" — just agents running in your systems.
Mid-market specialists
Scoped for $25M–$500M companies. Your budget, your team size, your timeline — not an enterprise playbook scaled down.
Full-stack ownership
From discovery to deployment to monitoring. One team, one codebase, one throat to choke. No handoffs between firms.
DESC-06

Sticky Scroll + Cards

P Purpose

The left column (title + description + CTA) stays pinned while the right column scrolls through 3–4 detail cards. Creates a narrative anchor — the visitor always knows what they're reading about while absorbing specifics one at a time.

W When to Use

  • Service pages — break a methodology into steps while maintaining the overview
  • Process explanations — TriStorm phases with detailed cards per phase
  • When content is sequential but each step deserves space to breathe
  • Funnel stage: Consideration — visitor is learning how you work

I Required Inputs

  • sticky — overline, title, desc (2–3 sentences), ctaText, ctaHref
  • cards[] (3–4) — each: number (e.g. "Step 01"), title, desc (1–2 sentences), optional ctaText + ctaHref

! Do Not

  • Use more than 4 cards — scroll distance becomes tedious
  • Put long descriptions in the left column — it's a summary, not an essay
  • Expect sticky behavior on mobile — left column becomes static at 768px
  • Repeat the left-column content inside the cards — they complement, not duplicate

V Variants

  • Standard (default) — cards with step number, title, and description
  • With CTAs — each card includes a soft arrow link for deeper exploration

F Typical Page Flow

  • After: Hero, Stats Row, or an introductory descriptive section
  • Before: Case Studies, Testimonials, or CTA Ending
  • On service pages: the methodology deep-dive
Live Preview
TriStorm Methodology
How we take you from idea to production
A repeatable, battle-tested process that turns operational bottlenecks into automated workflows. Four phases, six weeks, working software.
See a full case study ↗
Step 01
Workflow audit & opportunity mapping
We interview your team, map your processes end-to-end, and identify the 2-3 workflows where AI agents will deliver the highest ROI. No guesswork — just data.
Step 02
Agent architecture & prototype
We design the agent topology, select models, define guardrails, and ship a working prototype against your real data within the first two weeks.
Step 03
Production deployment & integration
The agent connects to your systems — ERP, CRM, email, file storage. We deploy with monitoring, fallbacks, and alerting from day one.
Step 04
Optimization & knowledge transfer
We instrument performance, tune the agent based on real usage, and train your team to maintain and extend it. You own everything.
DESC-07

Sticky Scroll + Images

P Purpose

Centered intro sits above a two-column grid. Left column has scroll-triggered text blocks that expand on activation. Right column holds a sticky image area that crossfades between visuals as the user scrolls. Creates a cinematic walkthrough — each scroll step reveals a new image paired with a new explanation.

W When to Use

  • Product tours — show different views of a tool as the user scrolls
  • Service walkthroughs — pair each phase with a distinct visual
  • Homepage — a premium "how it works" section with visual storytelling
  • When the image is as important as the text — each step needs visual proof

I Required Inputs

  • intro — overline, title, desc, ctaText, ctaHref (centered, above grid)
  • triggers[] (3–4) — each: overline, title, desc (1–2 sentences), image (4:3 ratio)
  • Images — one per trigger block; must change meaningfully between steps

! Do Not

  • Use more than 4 trigger panels — scroll distance becomes punishing
  • Use images that look identical — the crossfade is pointless if visuals don't change
  • Use more than one DESC-07 on the same page
  • Use on short pages — it needs vertical space to create the scrolling effect
  • Expect sticky image behavior on mobile — collapses to single column at 768px

V Variants

  • Standard (default) — white background, centered intro, left-border accordion triggers on left, crossfading image on right (sticky)

F Typical Page Flow

  • After: Hero, Stats Row, or introductory section
  • Before: Case Studies, Testimonials, Cards, or CTA Ending
  • On homepage: a premium mid-page section
  • On service pages: the methodology showcase
Live Preview
Platform Walkthrough
See what a production agent looks like
From the initial workflow map to the live monitoring dashboard — here's what you get at each stage of a Vstorm engagement.
Book a live demo ↗
Step 01
Workflow mapping & analysis
We generate a visual map of your current process, highlighting bottlenecks, manual steps, and automation candidates.
Step 02
Agent design & architecture
The agent topology is designed with clear boundaries — which model handles what, where guardrails sit, how failures cascade.
Step 03
Integration & deployment
Agents connect to your existing systems. Real data flows through, and you can see results in a staging environment before going live.
Step 04
Live monitoring dashboard
Real-time visibility into agent performance — success rates, processing times, exceptions, and cost per task. Your team controls everything.
DESC-08

Scroll Contrast Reveal

P Purpose

Premium narrative section where text gradually reveals word-by-word as the user scrolls. The copy itself is the visual experience. Best for brand philosophy, manifesto-style copy, or high-impact storytelling where each word landing matters.

W When to Use

  • Brand philosophy or "what we believe" sections
  • Manifesto-style copy that demands attention
  • Methodology principles or high-impact storytelling
  • As a deliberate pause before detailed methodology or case studies
  • Funnel stage: Awareness — creates emotional resonance before the rational argument

I Required Inputs

  • eyebrow — mono label, stays sticky in left column while text reveals
  • words[] — 25–40 word objects, each: text (word or short phrase), em (boolean for italic emphasis)
  • em — use on 2–4 key phrases per passage; avoid overuse

! Do Not

  • Use more than one scroll reveal section per page — dilutes impact
  • Use for bullet points or lists — words must form a coherent readable paragraph
  • Skip the eyebrow — it provides context while text is mid-reveal
  • Use on mobile-only pages — sticky eyebrow loses effect below 768px
  • Use more than 40 words — the reveal loses tension if it drags on

V Variants

  • Standard (default) — dark background, grey-to-ink word reveal, sticky eyebrow left, 2-column grid collapses at 768px

F Typical Page Flow

  • After: Hero or opening statement
  • Before: Services, methodology, case studies, or deep-dive content
  • Creates a pause for reflection — works well before detailed methodology
Live Preview
Our philosophy
We started Vstorm because we saw mid-market companies getting left behind. The big consultancies sell strategy decks. We ship production agents that run inside your systems from day one. No handoffs, no phase two — just working software.