Storm CSS — Component Test Page

Full Style System QA

Every component class rendered with lorem ipsum. Use this page to verify your stylesheet loaded correctly and spot any visual regressions.

Browse Components See Tables
Section 01
Typography Scale
Oswald Bold XL — 48px Headline
Oswald Bold LG — 36px Section Head
Oswald Bold MD — 22px Card Title

Section Header H2 — Centered Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.

Body text — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod magna non ex volutpat, vitae luctus leo pharetra. Curabitur aliquet quam id dui posuere blandit.

Section 02
Global Atmosphere
Atmosphere Background Active

This container uses .spi-atmosphere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. The radial gradient glows should appear behind this content block.

Section 03
UI Cards + Grid

Card Title Alpha

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod magna non ex volutpat vitae luctus leo pharetra.

Card Title Beta

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Card Title Gamma

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint.

grid-4

Delta

Lorem ipsum dolor sit amet consectetur adipiscing elit volutpat vitae.

Epsilon

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut.

Zeta

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.

Eta

Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia.

Section 04
UI List
Section 05
Video Cards
4:32
How Ball Motion Works on Dry Lanes
7:18
Understanding Coverstock Types
12:05
Surface Adjustments for Heavy Oil
Section 06
Article Cards
5 min read
Coverstock
Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque.
By John Doe · March 14, 2025
8 min read
Lane Play
Sed do eiusmod tempor incididunt ut labore et dolore magna.
By Jane Smith · April 2, 2025
3 min read
Arsenal
Duis aute irure dolor in reprehenderit in voluptate velit esse.
By Staff · May 8, 2025
Section 07
Cover Cards + Cover Grid

Coverstock Types

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Solid Reactive

Hook PotentialHigh
LengthShort
BackendStrong

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Best for heavy oil lane conditions.

Pearl Reactive

Hook PotentialMedium
LengthLong
BackendSnappy

Sed do eiusmod tempor incididunt ut labore. Ideal for dry to medium conditions.

Hybrid Reactive

Hook PotentialMed-High
LengthMedium
BackendBalanced

Duis aute irure dolor in reprehenderit. Versatile for a wide range of patterns.

Urethane

Hook PotentialLow
LengthVery Long
BackendSmooth

Excepteur sint occaecat cupidatat non proident. Great for sport patterns and precision.

Tech Cards (.tech-grid)

Nano360 Technology

  • Lorem ipsum dolor sit amet consectetur
  • Adipiscing elit pellentesque euismod
  • Magna non ex volutpat vitae luctus

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim.

eTrack+ Coverstock

  • Duis aute irure dolor in reprehenderit
  • Voluptate velit esse cillum dolore eu
  • Fugiat nulla pariatur excepteur sint

Occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim laborum.

RAD-X Core System

  • Pellentesque euismod magna non ex
  • Volutpat vitae luctus leo pharetra
  • Curabitur aliquet quam id dui posuere

Lorem ipsum dolor sit amet, consectetur adipiscing. Blandit nullam tempus sollicitudin.

Section 08
Tab System + Legend
Skid Phase
Hook Phase
Roll Phase
Reaction Bars
Solid Reactive — Heavy Oil
Pearl Reactive — Medium Oil
Urethane — Sport Pattern
Section 09
Layout Step System

Step 1 — Benchmark Ball

Medium Oil Symmetric Core

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod magna non ex volutpat, vitae luctus leo pharetra curabitur aliquet quam.

Section 10
Editorial List
Why It Matters

Understanding Ball Motion Physics

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

Core Geometry

How Asymmetric Cores Change Everything

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim laborum.

Surface Science

Grit, Polish, and Friction Explained

Pellentesque euismod magna non ex volutpat, vitae luctus leo pharetra. Curabitur aliquet quam id dui posuere blandit nullam tempus sollicitudin. Aliquet nec ullamcorper sit amet risus.

Section 11
Insight Cards
Skid Phase

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod magna non ex volutpat vitae luctus leo pharetra curabitur aliquet.

Hook Phase

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco.

RG Value
2.48
Differential
0.052
MB Diff
0.018

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Data values shown are for illustration purposes only.

Section 12
Maintenance — Attention Cards + Grid
Minor

Surface Wear

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod pharetra blandit.
Moderate

Track Buildup

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim exercitation.
Severe

Oil Absorption

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore nulla pariatur.
Critical

Cracked Shell

Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt.
Maintenance Grid

Post-Session Wipe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod magna non ex volutpat vitae luctus pharetra.

Deep Clean Monthly

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud ullamco.

Resurface Schedule

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur occaecat.

Timeline
Week 1–4

Break-In Period

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Surface is settling and hook potential increasing through normal game play.

Month 2–3

Peak Performance Window

Sed do eiusmod tempor incididunt ut labore. Ball motion is dialed in and consistent across a variety of conditions.

Month 4+

Resurface or Replace

Duis aute irure dolor in reprehenderit. Evaluate whether a fresh surface restoration will return performance.

Spinner Steps
Care Grid
Daily
  • Wipe ball with microfiber cloth after every session
  • Remove oil from track area with ball cleaner
  • Inspect surface for visible cracks or chips
Monthly
  • Deep clean with hot water extraction method
  • Re-evaluate surface texture with grit paper
  • Check finger inserts for wear and fit
Avoid
  • Never use household cleaners on reactive cover
  • Do not leave ball in hot car or direct sunlight
  • Avoid dropping on hard surfaces during transport
Section 13
Surface Adjustments
Surface is your #1 tuning tool.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit pellentesque euismod magna.
  • Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim veniam.
  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum nulla pariatur.
  • Excepteur sint occaecat cupidatat non proident sunt culpa qui officia deserunt mollit.
Grit-to-Condition Guide

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod magna non ex volutpat, vitae luctus leo pharetra curabitur aliquet quam posuere blandit.

Heavy Oil

Lorem ipsum dolor sit amet consectetur adipiscing elit pharetra.

180–500 Grit

Medium Oil

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

1000–2000 Grit

Light Oil

Duis aute irure dolor in reprehenderit in voluptate velit cillum.

3000+ or Polish

Sport Pattern

Excepteur sint occaecat cupidatat non proident culpa officia deserunt.

Urethane + Polish
Section 14
Grit Cards + Timeline

180 Grit

Aggressive traction
  • Heavy oil conditions
  • Early roll needed
  • Max friction

1000 Grit

Medium traction
  • Medium oil conditions
  • Balanced motion
  • Versatile choice

Polish

Maximum skid
  • Dry lane conditions
  • Long skid phase
  • Sharp backend
180
360
500
1000
2000
3000
4000
Polish
Section 15
Arsenal Matrix + Scale Grid
High Med Low
Weak Medium Strong
Hook Potential
Flare Potential
Arsenal Scale Grid
1 Ball
Beginner
  • One versatile ball
  • Medium grit surface
  • Symmetric core

Lorem ipsum dolor sit amet consectetur adipiscing elit.

3 Ball
Competitive
  • Benchmark + control
  • Stroker + big hook
  • Sport pattern option

Sed do eiusmod tempor incididunt ut labore dolore magna.

5 Ball
Advanced
  • Full condition coverage
  • Urethane + two reactives
  • Spare ball

Duis aute irure dolor in reprehenderit in voluptate velit.

7+ Ball
Tour Level
  • Pattern-specific selection
  • Multiple surface options
  • Full layout variety

Excepteur sint occaecat cupidatat non proident culpa deserunt.

Arsenal Options Row

Asymmetric Core

Symmetric Core

Section 16
Builder System

Select Your Benchmark

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pick the ball that best represents your baseline motion on a house shot.

Phaze II
Hy-Road
Nova
← Back Next Step →
Section 17
Coverstock Comparison Table
Ball Name Coverstock Core RG Differential Hook Potential
Asymmetric Cores
Phaze III TX-16 Solid Velocity (Asym) 2.48
0.058
 High
Physix NeX Solid Nucleus (Asym) 2.47
0.053
 High
Symmetric Cores
Hy-Road Pearl R2S Pearl GyroMotion (Sym) 2.52
0.044
 Medium
Nova HK22 Pearl Catalyst (Sym) 2.54
0.038
 Medium
Urethane
Original Hammer Urethane Classic (Sym) 2.56
0.020
 Low
Section 18
Phase Track + Aging Flow
Phase 01

Skid

Minimal friction, maximum distance

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod magna non ex volutpat.

Phase 02

Hook

Friction increases, angular motion begins

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim veniam.

Phase 03

Roll

Full rotation, driving through the pins

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.

Aging Flow
Game 1–50

Fresh Out of Box

Lorem ipsum dolor sit amet consectetur adipiscing elit pharetra blandit aliquet.

Game 51–150

Break-In Complete

Sed do eiusmod tempor incididunt ut labore et dolore magna enim veniam quis.

Game 150–300

Peak Motion

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum pariatur.

Game 300+

Resurface

Excepteur sint occaecat cupidatat non proident culpa qui officia deserunt mollit.

Section 19
Synergy Card
Core + Cover Synergy How the two components work in tandem

Core Geometry

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod magna non ex volutpat, vitae luctus leo pharetra. Curabitur aliquet quam id dui posuere blandit.

Coverstock Friction

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi aliquip.

Lorem ipsum dolor sit amet, consectetur adipiscing elit — neither element alone creates optimal ball motion.
Section 20
Lane Cards + Use Case Cards + Fundamental Cards

Heavy Oil Setup

  • Solid reactive coverstock
  • Low RG core — 2.47
  • 500 grit surface finish

Medium Condition

  • Hybrid reactive coverstock
  • Medium RG — 2.51
  • 1500 grit surface finish

Dry Lane Setup

  • Pearl reactive coverstock
  • High RG — 2.55
  • Polished surface finish
Use Case Cards
Asymmetric Core
For higher rev rate bowlers
  • Heavy to medium oil conditions
  • Straighter initial path, hard backend
  • Asym mass bias adds angularity

"Lorem ipsum dolor sit amet, consectetur adipiscing elit veniam."

Symmetric Core
For straighter ball path players
  • Predictable, controllable motion
  • Smooth arc through the lane
  • More consistent over multiple shots

"Sed do eiusmod tempor incididunt ut labore et dolore magna."

Fundamental Cards
The Cover
Foundation of friction and motion
  • Lorem ipsum dolor sit amet consectetur adipiscing elit pharetra.
  • Sed do eiusmod tempor incididunt ut labore et dolore magna.
  • Duis aute irure dolor in reprehenderit in voluptate velit.
The Core
Engine of ball motion shape
  • Excepteur sint occaecat cupidatat non proident culpa officia.
  • Pellentesque euismod magna non ex volutpat vitae luctus.
  • Curabitur aliquet quam id dui posuere blandit nullam tempus.
The Layout
Pin placement and drilling angles
  • Lorem ipsum dolor sit amet consectetur adipiscing elit volutpat.
  • Sed do eiusmod tempor incididunt ut labore magna aliqua enim.
  • Duis aute irure dolor reprehenderit voluptate velit esse cillum.
Section 21
Why Card
Why Layout Matters

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod magna non ex volutpat, vitae luctus leo pharetra curabitur aliquet.

Miss Left, Stay Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore magna aliqua enim ad minim veniam nostrud.

Inconsistent Entry Angle

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat.

Weak Pin Action

Pellentesque euismod magna non ex volutpat, vitae luctus leo pharetra. Curabitur aliquet quam id dui posuere blandit nullam tempus.

No Lane Coverage

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim laborum consectetur adipiscing elit.

"Lorem ipsum dolor sit amet — consectetur adipiscing elit, sed do eiusmod tempor."

Storm CSS Test Page