feat: add orchestrated page animations and micro-interactions by maheshrijal · Pull Request #8 · maheshrijal/rebill

maheshrijal · 2026-01-24T06:44:13Z

Motion enhancements (inspired by PR #6):

Orchestrated page entry: form slides from left, preview from right
Staggered form block animations with cascading delays
History panel scale-in animation
Focus ring pulse animation on inputs

Micro-interactions:

translateX(4px) hover effect on item rows and history items
scale(0.98) button press effect on all button types
Smooth transitions for all interactive elements

Layout:

Asymmetrical grid (0.9fr : 1fr) for visual interest

Print improvements:

Hide noise texture and animations in print
Preserve dark total row styling
Hide skip-link and placeholder in print output

All changes respect prefers-reduced-motion preference.

Amp-Thread-ID: https://ampcode.com/threads/T-019bee5e-33fb-7526-9a97-ab10f03bd6ff

Motion enhancements (inspired by PR #6): - Orchestrated page entry: form slides from left, preview from right - Staggered form block animations with cascading delays - History panel scale-in animation - Focus ring pulse animation on inputs Micro-interactions: - translateX(4px) hover effect on item rows and history items - scale(0.98) button press effect on all button types - Smooth transitions for all interactive elements Layout: - Asymmetrical grid (0.9fr : 1fr) for visual interest Print improvements: - Hide noise texture and animations in print - Preserve dark total row styling - Hide skip-link and placeholder in print output All changes respect prefers-reduced-motion preference. Amp-Thread-ID: https://ampcode.com/threads/T-019bee5e-33fb-7526-9a97-ab10f03bd6ff Co-authored-by: Amp <amp@ampcode.com>

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: ef86c51214

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-01-24T06:46:23Z

+.form-block {
+    opacity: 0;
+    animation: fadeInUp 0.4s var(--ease-out-expo) forwards;
+}


Keep form blocks visible after entry animation

Because main.css imports utilities before components, the later .form-block rule in components/forms.css overrides the animation here and drops the forwards fill mode. With opacity: 0 still coming from this rule, once the entry animation finishes (normal motion, non-reduced), the blocks revert to opacity 0 and effectively disappear. Consider removing the base opacity or ensuring the final animation rule keeps forwards/sets opacity: 1.

Useful? React with 👍 / 👎.

…tent

cloudflare-workers-and-pages · 2026-01-24T06:47:24Z

Deploying rebill with Cloudflare Pages

Latest commit:	`79435dd`
Status:	✅ Deploy successful!
Preview URL:	https://465b0188.rebill.pages.dev
Branch Preview URL:	https://feat-enhanced-motion-interac.rebill.pages.dev

View logs

github-actions · 2026-01-24T06:48:13Z

Playwright test results

72 passed

Details

72 tests across 2 suites
3 minutes
79435dd

Addresses PR review comment: The .form-block animation in forms.css was overriding the orchestrated animation in animations.css due to CSS cascade order (components load after utilities).

maheshrijal · 2026-01-24T07:38:50Z

@codex review

chatgpt-codex-connector · 2026-01-24T07:41:59Z

Codex Review: Didn't find any major issues. Can't wait for the next one!

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Copilot

Pull request overview

This PR adds orchestrated page entry animations and micro-interactions to enhance the user experience while maintaining accessibility through prefers-reduced-motion support. The changes introduce staggered animations for form blocks, slide-in effects for main sections, hover micro-interactions, and improved print styles.

Changes:

Added orchestrated page entry animations with form section sliding from left and invoice preview from right
Implemented micro-interactions including translateX hover effects and scale press effects on buttons
Updated layout to use asymmetrical grid (0.9fr : 1fr) for visual interest
Enhanced print styles to hide animations and preserve dark total row styling

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
src/css/utilities/animations.css	Added keyframe definitions for slideInFromLeft, slideInFromRight, scaleIn, and focusRingPulse animations; implemented orchestrated page entry and staggered form block animations with reduced motion support
src/css/layout/responsive.css	Enhanced print media query to disable animations/transitions and hide noise texture while preserving dark total row styling
src/css/layout/grid.css	Changed grid from symmetrical (1fr 1fr) to asymmetrical (0.9fr 1fr) for visual interest
src/css/components/history.css	Added translateX(4px) hover micro-interaction and transform transition property to history items
src/css/components/forms.css	Added hover micro-interaction to item-row with translateX(4px) and background change; removed old animation in favor of centralized animation in animations.css
src/css/components/buttons.css	Added scale(0.98) press effect to all button types (primary, secondary, ghost) on active state
src/css/base/variables.css	Added --ease-out-expo timing function, stagger delay variables (--stagger-1 through --stagger-6), and --primary-rgb variable for alpha usage

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-24T07:43:09Z

+    /* Stagger delays for orchestrated animations */
+    --stagger-1: 0.1s;
+    --stagger-2: 0.15s;
+    --stagger-3: 0.2s;
+    --stagger-4: 0.25s;
+    --stagger-5: 0.3s;
+    --stagger-6: 0.35s;
+


The stagger delay variables defined in this file are not being used. In animations.css, the animation delays are hardcoded (0.1s, 0.15s, 0.2s, etc.) instead of using these CSS variables. Consider either removing these unused variables or updating the animation delays in animations.css to use them (e.g., animation-delay: var(--stagger-1);). This would improve maintainability by centralizing the delay values.

Suggested change

/* Stagger delays for orchestrated animations */

--stagger-1: 0.1s;

--stagger-2: 0.15s;

--stagger-3: 0.2s;

--stagger-4: 0.25s;

--stagger-5: 0.3s;

--stagger-6: 0.35s;

Copilot · 2026-01-24T07:43:09Z

+.form-block:nth-child(1) { animation-delay: 0.1s; }
+.form-block:nth-child(2) { animation-delay: 0.15s; }
+.form-block:nth-child(3) { animation-delay: 0.2s; }
+.form-block:nth-child(4) { animation-delay: 0.25s; }
+.form-block:nth-child(5) { animation-delay: 0.3s; }
+.form-block:nth-child(6) { animation-delay: 0.35s; }


The animation delays are hardcoded here, but CSS variables for stagger delays (--stagger-1 through --stagger-6) are defined in variables.css. Consider using these variables instead to improve maintainability. For example: animation-delay: var(--stagger-1); for the first child, animation-delay: var(--stagger-2); for the second, etc.

Suggested change

.form-block:nth-child(1) { animation-delay: 0.1s; }

.form-block:nth-child(2) { animation-delay: 0.15s; }

.form-block:nth-child(3) { animation-delay: 0.2s; }

.form-block:nth-child(4) { animation-delay: 0.25s; }

.form-block:nth-child(5) { animation-delay: 0.3s; }

.form-block:nth-child(6) { animation-delay: 0.35s; }

.form-block:nth-child(1) { animation-delay: var(--stagger-1); }

.form-block:nth-child(2) { animation-delay: var(--stagger-2); }

.form-block:nth-child(3) { animation-delay: var(--stagger-3); }

.form-block:nth-child(4) { animation-delay: var(--stagger-4); }

.form-block:nth-child(5) { animation-delay: var(--stagger-5); }

.form-block:nth-child(6) { animation-delay: var(--stagger-6); }

Copilot · 2026-01-24T07:43:10Z

+/* ===== Focus Ring Animation ===== */
+.form-group input:focus,
+.form-group textarea:focus,
+.form-group select:focus {
+    animation: focusRingPulse 0.2s ease-out forwards;
+}


The focusRingPulse animation sets box-shadow values that will override the static box-shadow defined in forms.css line 146 (.form-group input:focus has box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);). The animation starts with box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4) and ends with box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15). This means after the animation completes, the box-shadow will be 0 0 0 3px rgba(99, 102, 241, 0.15) instead of the expected 0 0 0 3px rgba(99, 102, 241, 0.12) from the :focus rule. Consider adjusting the animation's final state to match the static focus style, or adjust the static style to use the animation's end state.

Copilot · 2026-01-24T07:43:10Z

+    /* Asymmetrical grid for visual interest */
+    grid-template-columns: 0.9fr 1fr;


There's a discrepancy in the asymmetrical grid ratio. This PR implements 0.9fr 1fr, but the referenced PR #6 (mentioned in the description) states it uses 0.85fr : 1fr. Please verify which ratio is intended and ensure consistency between the implementations.

Copilot · 2026-01-24T07:43:10Z

        scroll-behavior: auto !important;
    }
+
+    .form-block {


The reduced motion media query only explicitly sets opacity for .form-block elements, but other animated elements (.form-section, .invoice-section, .invoice-placeholder, .item-row, .history-panel) also start with opacity: 0 in their animations. When animations are disabled with animation-duration: 0.01ms, these elements might flash briefly at opacity 0 or may have visibility issues. Consider adding explicit opacity rules for all animated elements within the reduced motion media query to ensure they're fully visible, similar to what's done for .form-block.

Suggested change

.form-block {

.form-block,

.form-section,

.invoice-section,

.invoice-placeholder,

.item-row,

.history-panel {

Copilot · 2026-01-24T07:43:10Z

+
+/* ===== Staggered Form Block Entry ===== */
+.form-block {
+    animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;


The cubic-bezier timing function is hardcoded here but a CSS variable --ease-out-expo is defined in variables.css with the same value. Consider using var(--ease-out-expo) instead for consistency and maintainability, as is done in other animation rules (lines 63, 68, 87, 92).

Suggested change

animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;

animation: fadeInUp 0.4s var(--ease-out-expo) both;

chatgpt-codex-connector Bot reviewed Jan 24, 2026

View reviewed changes

fix: use animation-fill-mode 'both' to prevent flash of invisible con…

0908d96

…tent

fix: remove conflicting animation rule that overrides staggered entry

79435dd

Addresses PR review comment: The .form-block animation in forms.css was overriding the orchestrated animation in animations.css due to CSS cascade order (components load after utilities).

maheshrijal requested a review from Copilot January 24, 2026 07:38

Copilot started reviewing on behalf of maheshrijal January 24, 2026 07:39

View session

Copilot AI reviewed Jan 24, 2026

View reviewed changes

maheshrijal merged commit c3c8cae into main Jan 24, 2026
8 checks passed

maheshrijal deleted the feat/enhanced-motion-interactions branch January 24, 2026 07:44

		/* Asymmetrical grid for visual interest */
		grid-template-columns: 0.9fr 1fr;

-    .form-block {
+    .form-block,
+    .form-section,
+    .invoice-section,
+    .invoice-placeholder,
+    .item-row,
+    .history-panel {

	animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
	animation: fadeInUp 0.4s var(--ease-out-expo) both;

Conversation

maheshrijal commented Jan 24, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Jan 24, 2026

Choose a reason for hiding this comment

Uh oh!

cloudflare-workers-and-pages Bot commented Jan 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying rebill with Cloudflare Pages

Uh oh!

github-actions Bot commented Jan 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Playwright test results

Details

Uh oh!

maheshrijal commented Jan 24, 2026

Uh oh!

chatgpt-codex-connector Bot commented Jan 24, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 24, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

cloudflare-workers-and-pages Bot commented Jan 24, 2026 •

edited

Loading

github-actions Bot commented Jan 24, 2026 •

edited

Loading