Enhance Sign In / Sign Up transition and align input field widths.

[Neeraj-code-beep]

Current Behavior

On the authentication page, switching between Sign Up and Login uses a basic transition where the form content changes state. While functional, the transition feels abrupt and does not clearly convey direction or continuity during the switch.

Additionally, the email input field has inconsistent sizing compared to the other input fields. On larger screens it appears wider, while on smaller screens it appears narrower than the remaining inputs, resulting in a visual imbalance.

Desired Behavior

Enhance the existing Sign Up / Login experience with minimal, non-invasive changes:

• Add a simple left-to-right / right-to-left transition animation when switching between Sign Up and Login.
• The animation should only affect visibility and position (fade + horizontal shift), without changing the form structure or layout.
• No changes to form fields, validation logic, or content.
• Fix the input field sizing so all input fields have consistent width across screen sizes.
• Ensure the animation remains subtle and aligned with Sistent motion principles.
• For visual reference, the intended transition style is demonstrated in the attached video.

Screenshots / Mockups

https://github.com/user-attachments/assets/796ec3d8-8446-42ae-be5d-7b752597d47e

Implementation

• Apply a lightweight fade + horizontal translate animation when toggling between Sign Up and Login.
• Reuse existing Sistent spacing, color, and layout tokens without introducing new design values.
• Keep the animation duration short and unobtrusive (approximately 200–300ms).
• Respect prefers-reduced-motion by disabling animation when reduced motion is enabled.
• Adjust input field styles to ensure consistent width alignment across all form inputs at all breakpoints.
• Avoid any structural or visual changes to the form itself beyond animation and sizing consistency.

Acceptance Tests

• Switching between Sign Up and Login uses a smooth left-right fade transition without layout shifts.
• The form structure and content remain unchanged.
• All input fields maintain consistent width across screen sizes.
• Reduced-motion preferences are respected.
• No regressions in accessibility, keyboard navigation, or authentication functionality.

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.