UI/UX Components
Interactive engineering playground & documentation for all 20 core features and UX enhancements.
01 Theme, Navigation & Global Overlays
Dark / Light Mode
Persistent theme switcher using localStorage + prefers-color-scheme with smooth CSS variable transitions.
Cookie Consent Banner
Non-intrusive floating glass banner with Accept / Decline preferences saved in localStorage.
Site Search Modal
Fast client-side fuzzy indexing with live highlight, keyboard arrows, and ⌘K / Ctrl+K shortcut.
Back to Top Button
Floating circular glass button that automatically fades in past 300px scroll with smooth ease-to-top.
Accessible Mobile Drawer
Animated 3-line hamburger morph, backdrop blur overlay, focus trap (Tab / Shift+Tab), and Esc dismissal.
Scroll Progress Bar
Sticky 3px reading progress bar at top of viewport with cyan-to-violet gradient glow.
Smart Sticky Header
Auto-hides when scrolling down to maximize screen real estate and reveals smoothly when scrolling up.
"Skip to Content" Link
WCAG keyboard accessibility link hidden off-screen until focused via Tab key.
Floating Contact Widget
Bottom-right fixed action button with pulsing online dot and expandable speed-dial options.
02 Forms, Validation, Security & Attribution
Password Visibility Toggle
Interactive eye icon switching type="password" to type="text" with ARIA states.
UTM Parameter Capture
Captures utm_source, utm_medium, utm_campaign from query URLs and injects hidden inputs into forms.
utm_source: null (default)
Inline Error Validation
Field-level validation on blur/submit with shake animation, red glowing borders, and aria-invalid="true".
Form Success Card
Replaces form on successful dispatch with animated checkmark and reset callback.
Submission Successful
Confirmation Modals
Accessible dialog (role="dialog", aria-modal="true") with backdrop blur, focus trap, and Escape listener.
"Last Updated" Badge
Formatted timestamp badge with clock icon dynamically reading data-last-updated or document.lastModified.
03 Interactions, Skeletons, Accordions & Print
Skeleton Loaders & Spinners
Shimmer gradient placeholders and CSS spinners for dynamic data fetching transitions.
One-Click Copy Button
Reusable data-copy component with icon swapping (clipboard to checkmark) and animated tooltip.
npm i @bepsi/core
Expandable FAQ Accordion
Smooth CSS grid transition (grid-template-rows: 0fr -> 1fr) with full keyboard accessibility.
grid-template-rows from 0fr to 1fr, providing silky smooth transitions without fixed height hacks!
Micro-Interactions
Parallax glass 2D hover, radial cursor-following borders, button sheen, active scale press (0.98), and focus rings.
Print Stylesheet
@media print cleans backgrounds, hides navigation/canvas/floating widgets, formats margins, and expands accordions.