Skip to content

VERSION-1.2.md

Latest commit

 

History

History
199 lines (135 loc) · 5.89 KB

VERSION-1.2.md

File metadata and controls

199 lines (135 loc) · 5.89 KB

FORMA v1.2 — Release Summary

Release Date: December 6, 2025
Codename: The Professional
Focus: UX Polish & Premium Feel

🎯 Overview

Version 1.2 is a UX-focused release that transforms FORMA from a functional tool into a premium, polished product. This update introduces interactive visual elements, adaptive input components, and multi-goal training support.

Live Demo: forma-two.vercel.app

✨ New Features

Feature Description Status
🎡 Adaptive Duration Picker iOS-style drum wheel on mobile, horizontal slider on desktop ✅ SHIPPED
🎯 Multi-Goal Selection Select multiple goals (e.g., Hypertrophy + Strength) for hybrid training ✅ SHIPPED
🌌 Interactive Grid Background Cursor-tracking spotlight effect with CSS masking ✅ SHIPPED
📱 Mobile Readability Responsive fonts, tap-to-toggle tooltips, improved card layout ✅ SHIPPED
📄 High-Contrast PDF Larger fonts, darker text, readable on mobile screens ✅ SHIPPED

🔧 Technical Changes

1. Adaptive Duration Picker Component

New DurationPicker.tsx component with device-specific UX:

Mobile (Ghostly Scroll Wheel):

// Fixed height constants for reliable scroll math
const ITEM_HEIGHT = 64;     // h-16 = 4rem = 64px
const CONTAINER_HEIGHT = 256; // h-64 = 16rem = 256px

// CSS masking for dissolving edges
maskImage: "linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%)"

// Active vs Inactive states (index-based tracking)
Active:   text-5xl font-black text-white scale-110
Inactive: text-3xl text-white/20 blur-[1px] scale-90

// Mount scroll position fix
const scrollTop = index * ITEM_HEIGHT;
container.scrollTo({ top: scrollTop, behavior: "auto" });

Desktop (Horizontal Slider):

// Acid green fill track
background: linear-gradient(to right, #D4FF00 0%, #D4FF00 ${fill}%, rgba(255,255,255,0.1) ${fill}%, ...)

Impact: Premium, tactile feel on both mobile and desktop.

2. Multi-Goal (Hybrid) Training

Frontend State Change:

// Before (single goal)
const [goal, setGoal] = useState<string>("HYPERTROPHY");

// After (multi-goal array)
const [goals, setGoals] = useState<string[]>(["HYPERTROPHY"]);

Backend Prompt Logic:

// Single goal
"Goal: Hypertrophy";

// Multiple goals
"Goal: Hybrid Training (Hypertrophy + Strength)";
"Focus: Blend volume for size with heavy compound lifts for strength.";

Impact: Users can now train for multiple adaptations simultaneously.

3. Interactive Grid Background

New InteractiveGrid.tsx component:

// Track cursor position via CSS variables (no re-renders)
container.style.setProperty("--x", `${e.clientX}px`);
container.style.setProperty("--y", `${e.clientY}px`);

// Spotlight reveal via CSS mask
maskImage: `radial-gradient(circle 200px at var(--x) var(--y), black 0%, transparent 100%)`;

Impact: Futuristic "scanning the void" effect — grid lines glow near cursor.

4. WorkoutCard Refactor

Tooltip Improvements:

  • Solid bg-paper (#111111) background — no text bleed-through
  • onClick toggle for mobile (replaces buggy :hover)
  • Icon swaps to X when tooltip is open

Responsive Typography:

  • Exercise name: text-lg md:text-xl
  • Specs: text-sm md:text-xs labels, text-base md:text-sm values

Impact: Cards are readable on all devices, tooltips work reliably on touch.

5. PDF High-Contrast Mode

// Header: fontSize 18 (was 16), black text
// Day headers: fontSize 14 (was 11), bold
// Column headers: Light grey background, black text
// Exercise names: fontSize 12 (was 9), black text
// Science notes: fontSize 9 (was 7), dark grey

Impact: PDF is now readable while training on a phone screen.

📁 Files Changed

src/
├── app/
│   ├── layout.tsx              # InteractiveGrid integration
│   ├── page.tsx                # Multi-goal state, DurationPicker, PDF styles
│   └── globals.css             # Slider styles, scrollbar-hide utility
├── components/
│   ├── DurationPicker.tsx      # NEW — Adaptive duration selector
│   ├── InteractiveGrid.tsx     # NEW — Cursor-tracking background
│   └── WorkoutCard.tsx         # Tooltip fix, responsive fonts
└── lib/
    └── gemini.ts               # Hybrid goal prompt logic

📊 UX Metrics

Metric v1.1 v1.2 Improvement
Mobile Readability Poor (small fonts) Excellent ✅ Fixed
Tooltip Usability Buggy on touch Tap-to-toggle ✅ Fixed
Goal Flexibility Single goal only Multi-goal hybrid ✅ New
Background Static grid Interactive spotlight ✅ Premium
PDF Legibility Low contrast High contrast ✅ Fixed

🚀 Deployment

git add .
git commit -m "Release v1.2: Duration picker, Multi-goal, Interactive grid, Mobile UX"
git push origin main

Deployed via Vercel auto-deploy on push to main.

🔮 What's Next (v1.3)

  • Exercise demo videos
  • Admin dashboard for exercise management
  • Additional equipment categories

📜 License

Copyright © 2025 Forma. All rights reserved.

FORMA v1.2 — The Professional
Premium. Polished. Production-Ready.