Meauxbility - Reveal Animations

Reveal Animations

Smooth scroll-triggered animations that bring your content to life

Standard

Fades in from bottom

class="mx-reveal"

From Left

Slides in from left side

data-dir="left"

From Right

Slides in from right side

data-dir="right"

Scale Effect

Scales up while fading in

data-effect="scale"

Fast Animation

Quick 0.4s duration

data-speed="fast"

Slow Animation

Leisurely 1.2s duration

data-speed="slow"

Usage Examples

<!-- Basic reveal -->
<div class="mx-reveal">Content</div>

<!-- With direction -->
<div class="mx-reveal" data-dir="left">From left</div>

<!-- With delay and speed -->
<div class="mx-reveal" data-delay="2" data-speed="slow">Delayed</div>

<!-- With effect -->
<div class="mx-reveal" data-effect="scale">Scale effect</div>
Meauxbility - CSS Variables & Base Styles

Design System

Meauxbility's complete CSS variable system and base styles. Use this as the foundation for all other components.

Color Palette

Teal spectrum, Orange, Green, Gold

Typography

Inter font family with fluid scaling

Meauxbility - Parallax Effects

Parallax Effects

Immersive depth and motion that responds to scroll

Multi-Layer
Parallax

Three layers moving at different speeds

Simple Parallax

Single layer with gentle movement

Textured Background

Grid pattern with animated overlay

Implementation Guide

<!-- Parallax Container -->
<div class="mx-parallax" id="my-parallax">
  
  <!-- Background Layer (slowest) -->
  <div class="mx-parallax-layer" data-depth="0.1"
       style="background: your-background"></div>
  
  <!-- Foreground Layer (faster) -->
  <div class="mx-parallax-layer" data-depth="0.3" 
       data-blend="screen"></div>
  
  <!-- Content Overlay -->
  <div class="mx-parallax-content">
    <h2>Your Content</h2>
  </div>
</div>

Depth Values: 0.1 = slow movement, 0.5 = fast movement
Blend Modes: screen, multiply, overlay for layering effects

Meauxbility - Progressive Image Loading

Progressive Images

Smooth loading with blur-to-sharp transitions

Accessibility technology demonstration

Standard 16:10

Default aspect ratio

class="mx-progressive"
Person using assistive technology

Square Format

Perfect for profiles

data-ratio="square"
Inclusive workspace design

Portrait 3:4

Vertical orientation

data-ratio="portrait"
Collaborative accessibility meeting

Wide 21:9 + Hover

Cinematic with zoom effect

data-ratio="wide" data-hover="zoom"

Demo Controls

Implementation Guide

<!-- Basic Progressive Image -->
<div class="mx-progressive">
  <div class="mx-progressive-loader"></div>
  <img src="your-image.jpg" alt="Description" loading="lazy">
</div>

<!-- With aspect ratio and hover effect -->
<div class="mx-progressive" data-ratio="square" data-hover="zoom">
  <div class="mx-progressive-loader"></div>
  <img src="your-image.jpg" alt="Description">
</div>

Ratios: square, portrait, wide, vertical
Hover Effects: zoom, blur
Auto-loading: Images load and transition automatically when in viewport

Meauxbility - Hero Tilt Card

Hero Tilt Cards

Interactive 3D cards that respond to mouse movement

Normal

Empowering Lives Through Accessibility

Breaking barriers and creating opportunities for individuals with disabilities.

Learn More
Subtle

Professional Presentation

Gentle tilt effects perfect for business applications.

Dramatic

Dynamic Experience

Bold tilt with glow effects and depth layers for maximum impact.

Explore
Layered

3D Depth

Multiple depth layers create rich visual hierarchy.

Discover

Live Tilt Data

0°
X-Axis Rotation
0°
Y-Axis Rotation
0
Mouse X
0
Mouse Y

Implementation Guide

<!-- Basic Tilt Card -->
<div class="mx-card mx-tilt-card" data-intensity="normal">
  <h2>Your Title</h2>
  <p>Your content</p>
  <a href="#" class="mx-btn">Action</a>
</div>

<!-- With Glow and Layers -->
<div class="mx-card mx-tilt-card" data-intensity="dramatic" data-glow="true">
  <div class="mx-tilt-layer" data-depth="1"></div>
  <div class="mx-tilt-layer" data-depth="2"></div>
  <h2>Dynamic Title</h2>
  <p>Enhanced content</p>
</div>

<!-- Mobile-Disabled -->
<div class="mx-card mx-tilt-card" data-mobile="disable">
  Content
</div>

Intensities: subtle (professional), normal (balanced), dramatic (impactful)
Options: data-glow="true", data-shadow="dynamic", data-mobile="disable"
Layers: Add depth="1|2|3" for 3D layering effects

Meauxbility - KPI Counters & Stats

KPI Counters

Animated statistics that count up when scrolled into view

👥
0
Lives Impacted
🏆
0
Years Strong
📈
0
Success Rate
🤝
0
Partners

Size Variants

Small

0
Projects

Default

0
Volunteers

Large

0
Hours Served

Extra Large

0
Reach

Alignment Options

0
Left Aligned
0
Center Aligned (Default)
0
Right Aligned

Implementation Guide

<!-- Basic KPI Counter -->
<div class="mx-kpi" data-color="orange">
  <div class="mx-kpi-number" data-count="1000" data-suffix="+">0</div>
  <div class="mx-kpi-label">Lives Impacted</div>
</div>

<!-- Stat Card with Progress -->
<div class="mx-card mx-stat-card">
  <div class="mx-kpi-icon">📊</div>
  <div class="mx-kpi" data-size="large" data-color="teal">
    <div class="mx-kpi-number" data-count="96" data-suffix="%">0</div>
  </div>
  <div class="mx-kpi-label">Success Rate</div>
  <div class="mx-kpi-progress">
    <div class="mx-kpi-progress-bar" data-target="96"></div>
  </div>
</div>

<!-- Auto-trigger on scroll -->
<div class="mx-kpi mx-scroll-counter" data-color="green">
  <div class="mx-kpi-number" data-count="500">0</div>
</div>

Colors: orange, teal, green
Sizes: small, default, large, xl
Alignment: left, center (default), right
Auto-counting: Add `.mx-scroll-counter` class

Meauxbility - Kinetic Text Animation

Kinetic Text

Character-by-character text animations that bring words to life

More Options. More Access. More Life.

Animation Styles

Bounce Effect

Innovation drives progress

Slide Effect

Breaking down barriers

Scale Effect

Empowering independence

Flip Effect

Creating opportunities

Size Options

Small

Accessibility matters

Default

Every voice counts

Large

Bold impact

Interactive Text

Hover each letter to play

Move your mouse over individual letters

Word-Level Animation

Each word animates as a complete unit instead of individual characters

Scroll-Triggered

This text animates automatically when scrolled into view

Automatically triggers when 50% visible

Implementation Guide

<!-- Basic Kinetic Text -->
<div class="mx-kinetic">Your animated text</div>

<!-- With Options -->
<div class="mx-kinetic" 
     data-animation="bounce" 
     data-gradient="orange" 
     data-size="large" 
     data-speed="fast" 
     data-stagger="random">
  Customized animation
</div>

<!-- Word-level Animation -->
<div class="mx-kinetic" data-unit="word">
  Each word animates together
</div>

<!-- Auto-trigger on Scroll -->
<div class="mx-kinetic mx-scroll-kinetic">
  Scroll-triggered text
</div>

<!-- Interactive Hover -->
<div class="mx-kinetic" data-hover="true">
  Hover each letter
</div>

Animations: bounce, slide, scale, flip
Gradients: orange, teal, green, rainbow
Sizes: small, default, large, xl
Stagger: sequence, random, wave, center
Units: character (default), word

Meauxbility - Buttons & Interactive Elements

Interactive Elements

Buttons, forms, and interactive components with smooth animations

Button Variants

Toggle Switches

Enable Notifications
Dark Mode
Auto-save
Accessibility Features

Progress Indicators

Project Completion

Fundraising Goal

Community Impact

Form Elements

Action Cards

💖
Make a Donation
Support our mission with a contribution
🤝
Volunteer
Join our team of dedicated volunteers
🌟
Partner With Us
Explore partnership opportunities
📢
Share Our Story
Help spread awareness

Interactive Demo

Try out the different interactive states and effects

Implementation Guide

<!-- Primary Button -->
<button class="mx-btn primary large">
  <span>Action Text</span>
  <span>→</span>
</button>

<!-- Toggle Switch -->
<div class="mx-toggle" onclick="toggleSwitch(this)">
  <div class="mx-toggle-switch"></div>
  <span class="mx-toggle-label">Setting Name</span>
</div>

<!-- Progress Bar -->
<div class="mx-progress">
  <div class="mx-progress-bar animated" style="width: 75%"></div>
</div>

<!-- Form Input -->
<input class="mx-input" type="text" placeholder="Enter text">

<!-- Action Card -->
<div class="mx-card-action">
  <div class="mx-card-action-icon">💡</div>
  <div class="mx-card-action-title">Action Title</div>
  <div class="mx-card-action-desc">Description text</div>
</div>

Button Variants: primary, secondary, accent, ghost
Button Sizes: small, default, large, xl
Button States: disabled, loading, ripple
All elements include: Focus states, hover effects, and accessibility support

Meauxbility - Accessibility & Reduced Motion
Skip to main content Skip to accessibility controls
Reduce Motion

Accessibility Framework

Inclusive design with full keyboard navigation, screen reader support, and motion preferences

Accessibility Features

✓ Active

Keyboard Navigation

Full tab navigation, focus management, and keyboard shortcuts for all interactive elements.

✓ Active

ARIA Support

Comprehensive ARIA labels, roles, and states for screen reader compatibility.

✓ Active

Reduced Motion

Respects prefers-reduced-motion and provides manual animation controls.

✓ Active

High Contrast

Enhanced contrast ratios and high contrast mode support.

Font Size Controls

100%

This text will resize when you use the font controls above. Larger text helps users with visual impairments read content more easily.

Color Contrast Examples

4.5:1

Good Contrast (WCAG AA)

This text has sufficient contrast for readability and meets WCAG accessibility guidelines.

2.1:1

Poor Contrast (Fails WCAG)

This text has insufficient contrast and would be difficult for many users to read.

Accessible Loading States

Loading with Screen Reader Announcement

Loading content, please wait...

Progress with Live Updates

Progress: 65% complete

Screen Reader Features

Hidden Screen Reader Text

This paragraph contains hidden text that only screen readers will announce additional context for screen reader users.

Live Region Demo

Click the button above to see live region updates

Keyboard Navigation Test

Use Tab, Shift+Tab, Enter, and arrow keys to navigate these elements:

Custom Focusable Element
Keyboard interaction feedback will appear here

Accessibility Implementation

<!-- Skip Links -->
<a href="#main-content" class="mx-skip-link">Skip to main content</a>

<!-- ARIA Labels and Roles -->
<button aria-label="Close dialog" role="button">×</button>
<div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">

<!-- Screen Reader Only Text -->
<span class="mx-sr-only">Additional context for screen readers</span>

<!-- Live Regions -->
<div aria-live="polite" aria-atomic="true">Status updates</div>

<!-- Reduced Motion -->
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

WCAG 2.1 Compliance: All components meet AA standards
Keyboard Support: Full navigation without mouse required
Screen Readers: Compatible with NVDA, JAWS, VoiceOver
Motion Preferences: Automatic detection and manual controls

Our Promise

Access • Options • Independence • Life

We believe everyone deserves access to opportunities that help them live their fullest life. We break barriers, coordinate resources, and widen the path so you can focus on growth.

From therapies and devices to funding and logistics, we bring more options within reach—grounded in integrity, courage, and real support.

If you see it—if you believe it—let’s help you achieve it.

“Flow like water around obstacles. Those who adapt and evolve are the ones who thrive.” — Core Compass: Adaptability

More Options. More Access. More Life.

We champion adversity—wherever you start—and help you level up.

Support Journey - Community Portal

Support Journey

Empowering athletes through comprehensive support programs. Choose your path to make a difference.

Inner Animal Fund

Mental Health & Performance

$2,500

Support for mental health services, performance psychology, and athlete wellness programs.

Therapy Sessions Performance Coaching Wellness Programs

Equipment Fund

Gear & Technology

$1,500

Funding for essential equipment, training gear, and performance technology.

Training Equipment Performance Tech Safety Gear

Operations

Program & Infrastructure

$5,000

Support for program operations, facility maintenance, and community outreach.

Facility Maintenance Program Operations Community Outreach

Application Form

Please fill out the form below to apply for support.

✅ Application Submitted Successfully!
We'll review your application and get back to you within 48 hours.

Questions we get

What does “More Options” really mean?

We research and surface treatments, therapies, devices, training, and funding paths that match your goals.

Can you help with fundraising and logistics?

Yes—so you can focus on the work. We coordinate resources, timelines, and partners.

Who do you serve?

Individuals seeking independence and momentum—wherever they’re starting from.

Why Independence Matters

True independence isn’t just about doing things yourself—it’s about having the power to choose how you live. We put control back in your hands by expanding viable options and removing friction.

Every path looks different. Our role is to connect you with the right tools, funding, and support to gain traction—then grow it. Meauxbility is a movement for people who are trying.

If you see it, if you believe it—let’s help you achieve it.

DonMichael Campaign - Meauxbility
DonMichael
DonMichael

Help DonMichael Replace His Breaking Wheelchair

DonMichael is a warrior living with Friedreich's ataxia. His current wheelchair is failing, and he needs a specialized racing wheelchair to stay competitive. Your gift unlocks his next victory.

$0
raised
$10,000
goal
0%
complete
Be the first generous donor!