Meridian ASCII Login: Login | HorizonX

Code

Meridian ASCII Login

A passwordless sign-in page where a ringed planet, drawn live in monospace characters, fills the screen and the sun rises over it as the visitor moves from email to a 6-digit code to signed in. One HTML file.

HorizonX
Subscribe to download
Meridian ASCII Login, image 4
Meridian ASCII Login, image 2
Meridian ASCII Login, image 3
Meridian ASCII Login, image 4
  • Instant access Included with every membership
  • Full source code Download and run locally
  • Commercial license With a membership, for client work

Overview

Meridian is a passwordless sign-in page for SaaS and app products. Behind the form, a 3D planet with a tilted ring, city lights on its night side and a glowing edge is drawn live on a canvas as monospace characters, with a soft bloom on top. Each keystroke sends a ring of light out from the planet. The flow doubles as a sunrise. The email step is night with a backlit crescent, the code step is dawn and every typed digit moves the sun a notch, and signing in brings full day with a flare. A small readout in the corner shows the sun elevation, the clock and Night, Dawn or Day. The form pane has a logo, a three-step tracker (Email, Code, Sunrise) and three panels. Email has an underline field with typo suggestions such as gmial.com to gmail.com, an Email me a code button and rows for Google, GitHub and a passkey. Code has six slots that accept typing, pasting and one-time-code autofill, a resend timer and Open Gmail and Open Outlook links. Signed in shows a greeting with the account and sign-in method. A top bar switches between Sign in and Create an account. A Pause motion button stays in the corner, reduced motion shows a single still frame, and the animation pauses while the tab is hidden. Below 960 px the planet moves to the top and the form becomes a sheet underneath. The page ships as one self-contained HTML file with inline CSS and JavaScript. No framework, libraries, package installation or build step is required. Colors, glyphs, planet tilt, ring size and sun positions are set by a few constants and CSS variables. This is a frontend template. No email is sent, the demo code is 482913, and Google, GitHub and passkey are simulated; connect the form and the code check to your own auth provider before going live. The Meridian brand and copy are placeholders. Included: index.html, a quick-start, hosting and customization README, AGENTS.md and CLAUDE.md for AI coding agents, and font credits.

Highlights

  • Production-ready, documented source
  • Clean, componentized architecture
  • Drops into your stack with minimal setup

Preview

What's included

  • Full source code
  • README & setup guide
  • Component documentation
  • Commercial license with a membership

Frequently asked questions

  • The full source code for this asset, ready to download and integrate into your project.

  • Unzip the download and follow its README. Coded products run through a local web server or your project's dev server, started with the command the README gives, so double-clicking an index.html file can show a blank page. The Specs list on this page names the format and what it's built for.

  • It's included with a HorizonX membership. Download it instantly, no separate purchase.

  • Yes, with a HorizonX membership. Members get a commercial license: use and adapt these files in personal, client and commercial projects. If your plan ends, projects you already built keep their license, but the files can't be used to start new ones.

Related Products