Docs: landing, show content before the scripts load

[satran004]

On a phone, devkit.yaci.xyz showed only the header on a blank background for a few seconds before the page appeared.

Cause: the inline <head> script set data-dk-js on <html> before first paint. That turned on html[data-dk-js] .dk-reveal { opacity: 0 } for every scroll-reveal element, including the hero. They only became visible once React hydrated and useReveal added .in. On a slow phone, downloading and running the JS takes seconds, and the page stayed empty for that time. The illustrations weren't the cause.

Fix: the content is now visible as soon as the HTML arrives, so no loading spinner is needed.

• _document.tsx: the head script no longer sets data-dk-js. It only sets the theme.
• useReveal:
  • marks the hero, and anything already on screen, as shown;
  • then sets data-dk-js, so only content below the fold is hidden and fades in on scroll;
  • removes the attribute on unmount.
• landing.css: the hero fades up with a CSS-only dk-rise animation, so its entrance plays on first paint, not after hydration. Reduced motion still turns it off.

Testing

I tested the production build (out/) on a 390px viewport throttled to 1.6 Mbps with 150 ms latency and 6× CPU.

	Hero in the HTML	Hero visible	JS hydrated
Before	~1.6 s	~3.9 s	~3.9 s
After	~1.6 s	~1.6 s (fading in, fully shown by ~2.3 s)	~3.6 s

• A screenshot at 2.6 s, before hydration, shows the full hero.
• At 1440px:
  • on-screen sections are visible on load;
  • sections further down are hidden until scrolled to, then fade in;
  • after a client-side visit to the docs and back, the hero is visible.
• next build passes.

🤖 Generated with Claude Code