Documentation Index
Fetch the complete documentation index at: https://docs.scrollless.in/llms.txt
Use this file to discover all available pages before exploring further.
Summary
The application utilizes a customized Material 3 design system to provide interactive input controls. It features standard form elements like search bars and switches, alongside highly specialized components for premium features (glowing buttons) and safety mechanisms (destructive countdowns). The system heavily integrates haptic feedback and fluid animations to enhance user interaction.Design System & Theme
Visual Style
The input components rely on the Material 3 color scheme but introduce custom visual effects for high-emphasis elements.Standard Inputs
Standard inputs (Search, Date/Time pickers) use the Surface and Primary color roles to blend seamlessly with the system theme. They utilize standard Material shapes (Extra Large for search bars).
Premium Actions
“Get Access” style buttons use custom Rainbow Gradients and Blur Effects. These ignore standard theme colors in favor of eye-catching, animated gradients to drive conversion.
Haptics & Feedback
The system implements a granular haptic feedback strategy:- Click: Standard button presses.
- Confirm: finalizing a selection in a dialog.
- Scrub: Rotating the clock dial in the Time Picker.
Component Library
- Pickers
- Toggles
| Component | Usage | Key Features |
|---|---|---|
| DatePickerModal | Date selection | Supports Calendar and Input modes. Includes logic to restrict selection to past dates or specific ranges. |
| MaterialTimePickerDialog | Time selection | Custom typography (large digital clock). Haptic feedback when dragging the dial. |
Component Details
Destructive Countdown Button
What it is: A safety mechanism for irreversible actions. The button remains disabled while a red progress bar fills the background. Behavior Flow: Properties:| Property | Description |
|---|---|
totalSeconds | Duration of the lockout (default: 5s). |
text | Label shown. Changes to “Wait X…” during countdown. |
onConfirm | Action to execute only after countdown completes. |
Glowing Border Button
What it is: A high-emphasis call-to-action button designed to draw attention using light and motion. Animation Sequence:- Ignition: The button starts transparent.
- Glow: A blurred rainbow gradient appears underneath.
- Settle: A solid background fades in, leaving only the edges (border) glowing.
Settings Switch Item
What it is: A versatile list item containing a toggle switch, commonly used in settings screens. Interaction Modes:| Mode | Visual | Interaction |
|---|---|---|
| Unified | Standard List Item | Clicking anywhere on the card toggles the switch. |
| Split | Vertical Divider | Clicking the text area performs a navigation action; clicking the switch toggles the setting. |
Time Picker
What it is: A wrapper around the Material 3 Time Picker that enforces specific typography and haptics. Customizations:- Typography: Uses a custom
BodyFontFamilywith semi-bold weights for the digital clock display. - Haptics: Triggers a “Scrub” haptic effect when the user drags the clock hands to a new value.
- Layout: Automatically handles switching between Dial (clock face) and Input (keyboard) modes based on screen height.
Date & Time Logic
The system includes helper functions to manage date constraints:- Restricted Dates: Creates a validator that only allows selection within a specific millisecond range or year range.
- Past Dates Only: A preset validator that restricts selection to dates between a specific start year and “Today”.
UI Patterns & Rules
- Safety First: Always use the
DestructiveCountdownButtonfor data deletion or account removal. Never use a standard button for these actions. - Premium Distinction: Use
GlowingBorderButtonorRainbowButtonexclusively for upgrade paths or subscription features. Do not use them for standard navigation. - Input Modality:
- Date/Time pickers should default to “Picker” (visual) mode but allow switching to “Input” (keyboard) mode.
- On small screens (landscape), the Time Picker automatically switches to Input mode to save vertical space.
- Search Behavior: The
AppSearchBarautomatically shows a “Clear” (X) icon only when text is present and the field is focused.