Every utility inside the AwardsCSS infrastructure follows strict globally rendering naming conventions under the aw- namespace.
AwardsCSS is officially available on the npm registry and via globally distributed CDNs. Choose your preferred installation method below.
Load the full kinetic framework instantly via JS Delivr.
Via NPM
Via Yarn
| Class | Description |
|---|---|
| .theme-dark / .theme-light | Initializes global variable palette. |
| .aw-preloader | Full-page entrance preloader (wrapper). |
| .aw-preloader-text | Text inside preloader that flips up. |
| .aw-preloader-slice | Splits screen in half and opens left/right. |
| .aw-preloader-shutter | 4-div cinematic vertical shutter close. |
| Class | Description |
|---|---|
| .text-xs to .text-5xl .text-display .aw-text-fluid | Fluid clamping font scales. No media queries needed. Display is oversized, fluid scales directly with viewport. |
| .font-display .font-sans .font-mono | Applies primary headings, body, or technical fonts. |
| .aw-uppercase-tracked | Uppercase with 0.15em tracking. |
| .aw-text-stroke .aw-text-gradient .aw-text-gradient-accent | Static text fills and transparent stroke modes. |
| .aw-text-shine .aw-text-pulse-stroke | Endless animated gradient sweeps across the text. |
| .aw-text-media | Masks an image or video directly into the text. |
| .aw-scroll-fill .aw-highlight-scroll | Scroll-linked view timeline fill. Draws exactly as user scrolls down. |
| .aw-text-blur-reveal | Un-blurs and floats up text when scrolled into view. |
| .aw-text-stroke-wipe .aw-liquid-fill .aw-link-fill | Hover-triggered text fill animations (wipe, rise, horizontal). |
| .aw-text-kinetic-slice .aw-text-stagger-split .aw-text-hinge | Hover-triggered 3D physical manipulations of the text. |
| .aw-text-echo .aw-chromatic-aberration .aw-text-rgb-split .aw-text-perspective-cast | Hover-triggered shadow, perspective, and RGB offset FX. |
| .aw-glitch .aw-text-glitch-clip | Endless cyber RGB glitch overlays and clipping masks. |
| .aw-text-smoke .aw-text-reveal-mask .aw-text-blend-exclusion | Reveal and masking FX (smoke clears on hover). |
| .aw-text-marquee-hover | Endless sliding text on hover. |
| .aw-roller | Vertical slot-machine swap wrapper. |
| .aw-inline-reveal-wrap .aw-inline-reveal-img | Expands an inline image between text characters. |
| .aw-fx-liquid-metal .aw-fx-holo-glare .aw-spotlight-text | Advanced mapping (Chrome sheen, Holo wipe, Flashlight track). |
| Class | Effect |
|---|---|
| .container | Max-width clamped with dynamic fluid inline padding. |
| .flex / .grid .grid-cols-1 to 3 | Base layout modules mapping. |
| .p-0 to .p-8 .gap-2 to .gap-16 | Clamped base-8 padding/gap utilities. |
| .pt-section .pb-section .py-section | Huge responsive spacing block for section boundaries. |
| .aw-hero .aw-hero-split .aw-hero-headline | 100vh hero wrappers and split grids. |
| .aw-bento .aw-bento-wide .aw-bento-tall | Auto-fitting CSS grid setup mapped for modern Bento Box UI. |
| .grid-split-golden | 1.618fr to 1fr split layout. |
| .aw-grid-floor .aw-grid-floor-inner | 3D trailing perspective floor grid moving endlessly toward the user. |
| .aw-section-sticky .aw-section-sticky-horizontal | Sticky element holder, useful for parallax overlaps. |
| .aw-footer-parallax-wrapper .aw-footer-parallax | Deep sticky trick. Footer sits natively beneath the main wrapper. |
| Class | Effect |
|---|---|
| .aw-btn .aw-btn-text-mask | Pill shaped modern button with a sliding text swap. |
| .aw-btn-outline .aw-border-glow .aw-tracing-border | Outlines and intelligent continuous gradient tracing borders. |
| .aw-btn-marquee | Internal text becomes an endless marquee on hover. |
| .aw-btn-blob .aw-btn-organic | Fluid center blob scale and waving outer borders. |
| .aw-btn-brutal-glitch .aw-btn-neo-push .aw-btn-iso-push | Sharp, brutalist design. Glitch adds cyan/magenta shadow hooks. |
| .aw-btn-liquid-swipe .aw-btn-liquid-wave .aw-btn-fill-expand | Directional fluid fills (Swipe from left, wave from bottom, expand). |
| .aw-btn-cyber-frame .aw-btn-laser .aw-btn-barcode | Tech UI mapping (Corner frames, scanning lines, bottom laser). |
| .aw-btn-charge .aw-btn-sonar .aw-btn-portal | Radial animations (conic spin, radar burst, center expand). |
| .aw-btn-magnetic | Structural JS hook that snaps the button to the cursor center natively. |
| .aw-flip-link .aw-link-brackets .aw-link-cyber-line .aw-link-v-swap | Anchor link modifications (3D flip, brackets reveal, tech lines). |
| Class | Effect |
|---|---|
| .aw-card .aw-neo-card | Base modular cards (standard vs sharp brutalist). |
| .aw-card-interactive .aw-card-z-push | 3D space hover lift with trailing glow shadow / Deep Z push. |
| .aw-glass .aw-glass-intense .aw-ribbed-glass .aw-fx-glass-crack | Advanced refractive backdrops, masking, and overlay FX. |
| .aw-layered-glass .aw-layered-pane | Separates and tilts 3 stacked panels in 3D on hover. |
| .aw-stack-container .aw-stack-card .aw-card-stack-item | Sticky scroll scale sequence mapping. |
| .aw-spotlight-group .aw-spotlight-card | Tracks cursor radially to expose a glowing orb via --mouse-x/y. |
| .aw-isometric-grid .aw-isometric-card | Tilts layout 60deg into 3D isometric space natively. |
| .aw-holo-card | Color-dodge mix blend foil sheen reacting to 3D rotation. |
| .aw-card-fold .aw-card-fold-top .aw-card-fold-bottom | Container allowing top and bottom elements to act as hinges natively. |
| .aw-card-glass-reflect .aw-card-neon-wireframe .aw-card-elevator .aw-card-glitch-border | Sweep wipes, wireframe arrays, and glitch offsets on border properties. |
| .aw-card-stack-spread | Fans multiple cards open on hover. |
| .aw-card-float-tilt | Requires JS. Rotates the card mathematically based on cursor limits. |
| .aw-card-origami .aw-card-noise-burn .aw-card-lens | Clip-path snapping, overlay mask transition, and magnify lens. |
| .aw-3d-wrap .aw-3d-card | Base wrapper allowing X and Y pure CSS rotation pops. |
| .aw-cube-wrap .aw-cube .aw-cube-face | Pure CSS rotating 3D hardware-accelerated cube mapping. |
| Class | Effect |
|---|---|
| .aw-img-mask | Clips inner image overflow and scales image on hover natively. |
| .aw-blend-reveal .aw-img-rgb-hover | Grayscale image that restores color via luminosity/screen blend modes. |
| .aw-curtain-reveal .aw-diagonal-reveal .aw-circle-reveal | Clip-path manipulations (inset, polygon, circle expanding). |
| .aw-blob | A morphing, organic border-radius shape that contains any inner media. |
| .aw-fan-stack | Rotates 3 overlapping images outward on hover like playing cards. |
| .aw-split-gallery .aw-split-panel | Flex grid mapping panels that horizontally grow on focus. |
| .aw-gallery .aw-gallery-item | Native horizontal momentum scrolling frame with snapping. |
| .aw-img-parallax-wrap .aw-img-parallax | Native CSS view-timeline mapping the Y axis image shift. |
| .aw-img-stack-peel | Peels the top image diagonally backward to reveal the base image. |
| .aw-ring-gallery .aw-ring-inner .aw-ring-item | Orbiting 3D cylinder rotating continuous image nodes. |
| .aw-mask-wipe .aw-img-mask-speed | Linear-gradient mask sizing modifications tracking hover transition. |
| .aw-img-distort-grid .aw-img-shutter .aw-img-cyber-slice | Pseudo element slicing duplicating and skewing the background source. |
| .aw-img-lens-flare | Screen-blend mode radial glow that translates across bounds. |
| .aw-img-ken-burns | Ultra slow continuous scale expansion on hover. |
| .aw-img-film-strip | Continuous background-position tracking simulation. |
| .aw-img-pixelate | Modifies image-rendering dynamically. |
| .aw-halftone-hover | CSS Halftone dot mask map transforming over an image. |
| Class | Effect |
|---|---|
| .aw-input-group .aw-input .aw-label | Container managing relative focus positioning for floating labels. |
| .aw-input-glow-border | Radial hover mouse tracking glow behind an input. |
| .aw-input-elastic .aw-input-draw-line | Scales the bottom border thickness natively on focus. |
| .aw-checkbox-liquid .aw-checkbox-brutal | Replaced checkbox native components. |
| .aw-input-terminal | Blinking green cursor with mono typeface setup. |
| .aw-accordion-container .aw-accordion .aw-accordion-content | Re-styles native HTML <details>. Utilizes pure CSS 1fr grid transition. |
| .aw-accordion-glow-wrap | Blurs and fades sibling accordions not actively hovered. |
| .aw-accordion-slide-out | Horizontal mapping expanding the panel out to the side. |
| .aw-accordion-magnetic .aw-accordion-cyber .aw-accordion-marquee | Border logic modifications tracking the details native `[open]` state. |
| Class | Effect |
|---|---|
| .aw-nav .aw-nav-brand .aw-nav-links | Fixed top placement header wrappers. .scrolled class modifies backdrop blur. |
| .aw-glass-dock .aw-dock-item | macOS style floating navigation dock with :has scaling mechanics. |
| .aw-nav-magnetic-group | Pill hover that snaps between items dynamically via CSS. |
| .aw-nav-blur-group .aw-link-blur | Fades out and blurs un-focused links in a group. |
| .aw-nav-difference | Mix-blend difference wrapper for full transparency over media. |
| .aw-ghost-menu .aw-ghost-link | When hovered, blurs all children except the one focused. |
| .aw-slide-tabs .aw-tab | Inline pill tabs with sliding pseudo element. |
| .aw-cylinder-wrap .aw-cylinder | Infinite spinning 3D carousel holding 3 spans of text. |
| .aw-ticker-3d-wrap .aw-ticker-3d | Horizontal spinning 3D carousel. |
| .aw-ticker-vertical .aw-ticker-wave | Screwing vertical trackers and wave oscillating inline blocks. |
| Class | Effect |
|---|---|
| .aw-reveal-scroll .aw-fade-up .aw-stagger-1, 2, 3 | Animation delay utilities and intersection observers natively. |
| .aw-scroll-progress | CSS native scroll-timeline mapping body progression to width. |
| .aw-scroll-zoom-bg .aw-scroll-zoom-inner | Un-blurs and shrinks image down to 1:1 mapped to view entry. |
| .aw-scroll-skew .aw-scroll-scale-up .aw-scroll-curtain .aw-scroll-horizon .aw-scroll-zoom-out-fit .aw-scroll-fold-away .aw-scroll-color-shift | Cutting edge CSS View-Timeline animations manipulating transform scale, skew, pitch, clip paths, border-radius horizons, and hue-rotate maps. |
| .aw-section-parallax-bg .aw-section-grain | Fixed background attachments and strict base64 overlay blends. |
| .aw-noise-animated .aw-noise-overlay .aw-noise-crt | TV static filters mapped to pseudo elements overlapping `-50%`. |
| .aw-mesh-bg .aw-gradient-mesh-anim | Fixed mesh grid utilizing radial math to build fluid intersection grids. |
| .aw-aurora-bg .aw-aurora-blob | Overflow-hidden container mapped for aurora objects shifting. |
| .aw-blur-orb .aw-glow-orb-follow | Solitary static blurred glowing orb positioning vs mouse tracking. |
| .aw-grid-trail-container .aw-grid-trail-box | Hovering grid boxes that paint and slowly fade out (trail). |
| .aw-spin-badge .aw-badge-pulse .aw-text-circular-path | A continuously rotating SVG badge overlay or pulse radar dot. |
| .aw-float-organic .aw-float-delay | Endless up/down organic floating keyframe. |
| .aw-gooey-wrapper .aw-gooey-item | Heavy contrast and blur filters to merge intersecting HTML elements natively. |
| .aw-vignette-dark | Inner shadow casting to create a cinematic edge burn. |
| .aw-fx-topography .aw-fx-scanline-fast | Line mapping and scanning overlays. |
| Class | Effect |
|---|---|
| .aw-cursor-dot .aw-cursor-focus | Custom DOM cursor mapped to window space natively. |
| .aw-cursor-radar | Custom DOM cursor executing a conic gradient sweep. |
| .aw-cursor-invert | Mix-blend mode difference mapped to the cursor element. |
| .aw-tooltip-trigger .aw-tooltip | Hovering exposes the inner container natively scaling up. |
| .aw-tooltip-follow-wrap .aw-tooltip-follow | Tooltip logic that requires JS `--mouse-x/y` to stick to pointer. |
| .aw-mask-reveal-container .aw-mask-reveal-layer | Hides an inner layer utilizing a radial mask tied to mouse coordinates. |