← Wireframe Overview
Defenders Hub — Main Page
Hero — White BG + Blue Sunburst Rays
INTRUSION INC. PRESENTS
[ Group hero image — 4 defenders + dog, transparent PNG on white bg ]
1600x1066, optimized to 1.6MB
[ "THE INTRUSION DEFENDERS" logo — blue text, transparent PNG ]
MEET THE DEFENDERS EXPLORE SHIELD
White background (#fff). Blue sunburst conic-gradient rays behind content. Hero text color changed to dark for readability. Group image: "Untitled design.png" with bg removed. Logo: blue "THE INTRUSION DEFENDERS" text. Two CTA buttons centered.
Scrolling Ticker — Lime BG
8.5 Billion Records20+ Years Intelligence40+ Years Heritage7 Consecutive QuartersPrevention-First100 Gbps SentinelStratus on AWS
CSS infinite scroll animation. Stats duplicate for seamless loop. Bangers font for values, Outfit for labels. NO CHANGES per Jodi.
Defender Profiles — Four Agents, Four Jobs
[ Superpower vertical image — Flow ]
superpower-flow.png
BG: #FEFEFE
YELLOW BANNER QUOTE (rotating)
DEFENDER 01
FLOW
See everything. Miss nothing.
USE FLOW FOR: [ pills ]
STAT BARS: Detection 96 | Coverage 100% | Blind Spots Zero
Alternating 40/60 grid layout for each defender. Art panel: #FEFEFE white background (matches image BG), Superpower vertical PNGs, NO glow overlay, NO dark gradient. Yellow banner-style quote treatment with rotating JS quotes. NO product badges (removed per Jodi: Shield Gateway, Shield Sentinel, Shield OnPrem, Shield Endpoint all removed). Stat bars animate on scroll. "Use For" pills with hover effects.
Tagline Bar
"THREATS DON'T SLEEP. NEITHER DO WE."
Blue background. Bangers font. "WE" in lime accent. Full-width band.
Individual Character Pages (x4)
Character Pages — Flow, DB Memorall, Barry Cader, Browsr
All 4 character pages follow the same template structure (modeled after Flow's page), with character-specific content and accent colors:
FLOW
/defenders-flow/
Accent: #d9f800
DB MEMORALL
/defenders-db/
Accent: #6e87ff
BARRY CADER
/defenders-barry/
Accent: #d9f800
BROWSR
/defenders-browsr/
Accent: #ff8c00
Each page sections (same order):
1. Hero — Blue bg + sunburst, split grid (character Superpower art + floating speech bubble left, content right)
2. Ticker — Same scrolling stats bar
3. Briefing — "Who is [Character]?" with bio, drive card, edge card, pronouns
4. Capabilities — Stat bars + use case pills + sector pills
5. Shield Product — Product block with animated CSS ring graphic
6. Threat Context — 3 threat panels specific to character
7. Meet the Squad — Cards for the other 3 defenders
8. CTA Band — Lime green call to action
9. Footer — Links to all defenders
All 4 pages built as WordPress ghost page templates (page-defenders-flow.php, page-defenders-db.php, page-defenders-barry.php, page-defenders-browsr.php). Each uses CSS custom property overrides for accent color theming (--pc, --pg, --pb). Superpower PNGs used for hero art. Speech bubble rotation via vanilla JS setInterval.
Issue #1 — Comic Flipbook
Issue #1 — Comic Flipbook Viewer
URL: /defenders-issue-1/
PDF: IntrusionDefendersComicEpisode1.pdf (17 pages, 13.6MB)
HERO SECTION
"THE INTRUSION DEFENDERS • ISSUE #1"
The Comic.
DOWNLOAD PDF READ NOW BACK TO HUB
FLIPBOOK READER
[ PDF.js renders pages as canvas ]
[ 3D page-flip CSS animation ]
[ Web Audio API paper sound ]
[ Click zones: left 25% / right 25% ]
Prev Page 1 of 17 Next Mute Fullscreen
Self-contained flipbook viewer using PDF.js. 3D page-flip animation (perspective rotateY). Synthesized paper-flip sound via Web Audio API with mute toggle. Touch swipe + keyboard nav (arrow keys, spacebar, escape). Fullscreen mode. Nav has "BACK TO HUB" text link (no arrow entity — WordPress was encoding it).
← Back to Wireframe Overview · Prepared by AWC for Intrusion Inc. — April 2026