Frontend Experience

1 post with the tag “Frontend Experience”

HagiCode Splash Screen Design: The Ultimate Way to Fill the Hydration Gap in React 19 Apps

Feb 3, 2026

Designing 12 Exceptional Startup Experiences for HagiCode: From Minimalism to Cyberpunk

The brief gap between downloading a React 19 app and completing Hydration is a golden opportunity for users to feel your brand personality. In this article, we share a complete startup style system we built for the HagiCode project using HTML/CSS/JS.

Background

As a modern application built with ASP.NET Core 10 and React 19 (Vite), HagiCode uses a frontend-backend separated deployment architecture. The frontend build output is packaged into the backend wwwroot/ directory and hosted by ASP.NET Core.

However, this architecture introduces a classic UX pain point: when users visit the page, the browser first loads the HTML, then downloads the large JS bundle, and finally lets React perform Hydration. During this “vacuum period” that lasts from a few hundred milliseconds to several seconds, users see either a blank screen or a lifeless static page.

To fill that gap and inject HagiCode’s brand personality, we needed to design a startup style system implemented entirely with inline code inside index.html.

About HagiCode

The splash screen design approach shared in this article comes from our practical experience in the HagiCode project. As an AI coding assistant, HagiCode cares not only about code generation efficiency, but also about the developer’s visual experience. This startup system is one of the outcomes of our pursuit of ultimate frontend performance.

Core Challenges and Architecture Design

Before we started designing, we first had to clarify the technical constraints. Since everything had to be implemented inline in index.html, we could not load any external CSS or JS files other than React’s own bundle.

Technical Constraint Analysis

1. Zero-dependency principle: All styles must live inside a <style> tag, and all logic must live inside a <script> tag.
2. Defensive CSS: To prevent global styles from polluting the splash screen after the React app mounts, we decided to wrap all startup styles with a high-priority ID prefix such as #boot-screen.
3. Performance first: Animations should use CSS transform and opacity wherever possible to avoid reflow and ensure the main thread stays unblocked.
4. Visual consistency: Colors and fonts must stay aligned with HagiCode’s Tailwind configuration.

Architecture Pattern: Shell & Injector

We adopted a variant pattern. The core logic is encapsulated inside an immediately invoked function expression (IIFE), while the specific rendering logic is injected through configuration. This lets us switch between different styles through simple configuration instead of rewriting DOM manipulation logic repeatedly.

Here is the core architecture code:

<!-- Inline in index.html -->
<div id="boot-root"></div>

<script>
(function() {
  const BootSequence = {
    config: {
      theme: 'terminal', // Configurable as 'minimal', 'skeleton', 'code-rain', etc.
      color: '#3b82f6'   // Brand color
    },

    // Core lifecycle
    init() {
      this.render();
      this.listenForMount();
    },

    // Render the currently selected style
    render() {
      const root = document.getElementById('boot-root');
      if (this.variants[this.config.theme]) {
        root.innerHTML = this.variants[this.config.theme].render();
      }
    },

    // Listen for successful React mount and exit gracefully
    listenForMount() {
      window.addEventListener('hagicode:ready', () => {
        const screen = document.getElementById('boot-root');
        // Fade out first, then remove the DOM to avoid flicker
        screen.style.opacity = '0';
        screen.style.transition = 'opacity 0.3s ease';
        setTimeout(() => screen.remove(), 300);
      });
    },

    // The implementation logic for all 12 styles lives here
    variants: {
      // ...see details below
    }
  };

  BootSequence.init();
})();
</script>

A Checklist of 12 Startup Style Designs

We grouped these 12 styles into six major categories to satisfy different scenarios and aesthetic preferences.

A. Minimalism

“Less is more.” For scenarios that pursue ultimate loading speed, we provide the lightest possible options.

1. Minimalist Dot

A simple dot sits at the center of the screen, paired with a breathing animation.

• Implementation: CSS @keyframes controls scale and opacity.
• Best for: Any case where the page must remain absolutely clean.

2. Brand Reveal

Using SVG stroke-dasharray animation, it simulates a hand-drawn reveal of the HagiCode logo lines, followed by a text fade-in.

• Technique: SVG path animation with a highly polished feel.

B. Skeleton Screen Mimicry

“The art of deceiving the eye.” By simulating a real UI layout, users feel like the page is already half loaded.

3. Sidebar Chat Skeleton

This may be the most practical option. We manually built a layout in HTML that mirrors the React Sidebar and ChatInput components exactly, then overlaid it with a gray shimmer animation.

• Value: When React hydration completes, the skeleton instantly becomes the real component, and users can barely perceive the switch.

4. Card Stack Skeleton

It simulates the stacked motion of proposal cards while loading, using 3D transforms to make the cards float subtly.

C. Abstraction and Art

Show off HagiCode’s geek DNA.

5. Geometric Morph

A geometric shape (a square) is rendered at the center of the screen, then smoothly transforms over time into a circle, a triangle, and finally the logo.

• Technology: Smooth transitions with CSS border-radius.

6. Code Rain

A tribute to The Matrix. Using the JetBrains Mono font, faint streams of characters fall in the background.

• Note: For performance, the character streams must stay within a smaller area or use a lower refresh rate.

7. Neon Pulse

A cyberpunk-style glowing ring that uses multiple box-shadow layers to create a powerful neon glow.

D. Branding and Themes

Make the system feel alive.

8. Seasonal Theme

This is a dynamic loader. It checks the current date for holidays such as Lunar New Year or Christmas and loads the corresponding SVG animation.

• Example: During Lunar New Year, red lanterns gently sway at the bottom of the screen.

9. Gradient Flow

The background uses a fluid gradient based on HagiCode brand colors. Combined with animated background-size and background-position, it creates an aurora-like sense of motion.

E. Technical Feel

A salute to developers.

10. Terminal Boot

It simulates console output. Lines of code scroll by rapidly:

> Initializing HagiCode Core...
> Loading models...
> Connecting to neural network...

That instantly feels familiar to every developer.

11. Progress Bar

A thin progress bar appears at the top of the screen, with a percentage shown on the right. While we cannot access the real download progress, we can use a timer to simulate a “believable” loading process: fast for the first 80%, then gradually slower for the last 20%.

F. Creativity

12. Pixel Assembly

This is a very interesting idea. Small squares are scattered across the screen, then converge toward the center and gradually assemble into the HagiCode logo icon. It symbolizes the process of building code.

Best Practices and Pitfalls

In HagiCode’s real development work, we summarized several critically important implementation details.

1. Defensive CSS Is Mandatory

Never get lazy and skip the prefix. Once, we forgot to scope the splash screen styles with an ID, and global div styles after React mounted unexpectedly affected the splash screen, breaking the layout. Lesson learned: Put every CSS selector under #boot-screen, and use !important to raise priority when necessary, but only inside the splash screen CSS.

2. Graceful Transitions

After React mounts successfully, do not directly remove() the splash screen DOM. Correct approach:

1. React triggers window.dispatchEvent(new Event('hagicode:ready')).
2. The splash screen listens for the event and first sets opacity: 0.
3. Wait 300ms, which matches the CSS transition duration, and call .remove() only after the screen is fully invisible.

3. Theme Variable Synchronization

The splash screen color values are hard-coded in index.html. If we change Tailwind’s primary color, we must update the splash screen too. Optimization: Write a simple plugin in the Vite build script to read tailwind.config.js and inject color variables into the index.html template variables, creating a single source of truth.

4. Font Preloading

Splash screens often need to use a brand font, but if the font loads slowly, FOUT (Flash of Unstyled Text) can appear. Solution: Add <link rel="preload" href="/fonts/JetBrainsMono.woff2" as="font" type="font/woff2" crossorigin> inside <head>. This is a low-cost, high-return way to improve the experience.

5. Performance Monitoring

We injected performance.mark('boot-start') at the bottom of index.html, and marked boot-end when React mounted successfully. Why it matters: By collecting this data through Application Insights, we can directly measure how much the splash screen shortens perceived waiting time. The data shows that an excellent skeleton screen can improve users’ tolerance for a “slow network” by more than 50%.

Summary

A good splash screen is more than “decoration while waiting”. It is the handshake signal in the very first interaction between the product and the user. In the HagiCode project, this startup system based on the Variants pattern lets us flexibly switch styles across holidays and releases, greatly enhancing the product’s sense of fun and professionalism.

The solution shared in this article is built entirely on native web standards without introducing any heavy dependencies, which reflects HagiCode’s pursuit of being “lightweight yet powerful.” If you find this approach valuable, feel free to check out the source code in the HagiCode repository and even contribute your own creative designs.

References

• HagiCode project repository: https://github.com/HagiCode-org/site
• Learn more on the official site: https://hagicode.com
• Watch the live demo: https://www.bilibili.com/video/BV1pirZBuEzq/
• One-click installation experience: https://hagicode.com/installation/docker-compose

If this article helped you, feel free to give the project a Star on GitHub. The public beta has already started, and we look forward to your feedback!

---

Thank you for reading. If you found this article useful, please click the like button below 👍 so more people can discover it.

This content was created with AI-assisted collaboration, reviewed by me, and reflects my own views and position.

• Author: newbe36524
• Article link: https://hagicode.com/blog/2026-02-03-hagicode-react-19-hydration-splash-screen/
• Copyright notice: Unless otherwise stated, all blog posts on this site are licensed under BY-NC-SA. Please cite the original source when reprinting.

Tags:

• React 19
• Hydration
• Splash Screen
• Frontend Experience
• Vite