Skip to content

feat: animation/delight pass + selectools.dev custom domain#40

Merged
johnnichev merged 2 commits intomainfrom
feat/landing-animation-delight
Apr 6, 2026
Merged

feat: animation/delight pass + selectools.dev custom domain#40
johnnichev merged 2 commits intomainfrom
feat/landing-animation-delight

Conversation

@johnnichev
Copy link
Copy Markdown
Owner

@johnnichev johnnichev commented Apr 6, 2026

Summary

Two related changes bundled on this branch per the "one branch until release-ready" workflow:

  1. Animation + delight pass for the landing page and docs site (commit ff06696)
  2. selectools.dev custom domain wiring across the codebase (commit 8679d44)

1. Animation + delight (commit ff06696)

Applies /animate + /delight skills guided by a new .impeccable.md design context. Nine focused changes, no destructive refactors, no existing animations touched.

Landing page (landing/index.html)

  • prefers-reduced-motion support — WCAG AA requirement per .impeccable.md
  • Scroll progress bar in the nav (cyan→blue gradient, rAF-driven)
  • Nav hide-on-scroll-down, show-on-up
  • Hero stats count-up (152 models, 4612 tests, ...) when scrolled into view
  • Tactile buttons — 1px lift hover / 1px press active, cubic-bezier(0.16, 1, 0.3, 1), colored glows on primary and cyan CTAs
  • pip copy upgraded — text swaps to "Copied!", cyan pulse, green success
  • Card hover lifttranslateY(-2px) + deeper shadow
  • Nav logo wink — 3° rotation + slight scale on hover
  • Console easter egg — styled console.log with NichevLabs contact for devs who open DevTools

Docs site (docs/stylesheets/extra.css)

  • Admonition hover lift + shadow
  • Grid card hover lift
  • Animated body-link underlines (::after + transform: scaleX())
  • Code-copy button scale, nav-link slide-right on hover
  • Page content fade-in
  • Matching prefers-reduced-motion block

New file

  • .impeccable.md — persistent design context: brand (Bold/Developer-First/Complete), palette, typography, 5 design principles, WCAG AA target. Auto-consumed by future design skills.

2. selectools.dev custom domain (commit 8679d44)

66 URL replacements: https://johnnichev.github.io/selectoolshttps://selectools.dev across the entire public surface.

Files changed (15 total)

  • docs/CNAME (new) — single line selectools.dev. MkDocs auto-copies non-markdown files from docs/ to site/, so this becomes site/CNAME on every build, which is what GitHub Pages reads to enforce the custom domain. No workflow edit required.
  • mkdocs.ymlsite_url
  • pyproject.tomlDocumentation URL (regenerates sbom.json on next release)
  • sbom.jsonurl
  • landing/index.html — canonical, og:url, og:image, twitter:image, JSON-LD schema, FAQ answer (6 refs)
  • landing/simulations/index.html — 6 refs
  • docs/llms.txt — 37 refs (the LLM-readable site index)
  • docs/llms-full.txt — 2 refs
  • docs/robots.txt — sitemap directive
  • docs/QUICKSTART.md, docs/modules/builder.md — 1 ref each
  • README.md — 5 badges + links
  • ROADMAP.md, CLAUDE.md, SECURITY.md — 1 ref each

Verified locally

  • mkdocs build → 0 errors, 0 warnings (besides pre-existing README/index conflict)
  • site/CNAME present after build
  • site/sitemap.xml emits selectools.dev URLs
  • All pre-commit hooks pass (14/14, including YAML/JSON/TOML syntax checks)

⚠ Manual steps still required (after merge)

These cannot be automated from the codebase — they have to happen on Hostinger and GitHub:

1. Hostinger DNS records for selectools.dev

Add these in Hostinger → Domains → selectools.dev → DNS Zone Editor:

Type Name Value TTL
A @ 185.199.108.153 3600
A @ 185.199.109.153 3600
A @ 185.199.110.153 3600
A @ 185.199.111.153 3600
AAAA @ 2606:50c0:8000::153 3600
AAAA @ 2606:50c0:8001::153 3600
AAAA @ 2606:50c0:8002::153 3600
AAAA @ 2606:50c0:8003::153 3600
CNAME www johnnichev.github.io 3600

The IPv4 A records are required. The IPv6 AAAA records are optional but recommended (faster for IPv6 clients). The www CNAME makes www.selectools.dev redirect to the apex.

Remove any default Hostinger A records that point to Hostinger's parking IPs before adding the GitHub ones.

2. GitHub Pages settings

After DNS propagates (usually 5–60 min, can be up to 24h):

  1. Go to https://github.com/johnnichev/selectools/settings/pages
  2. Custom domain: enter selectools.dev → Save
  3. Wait for the green "DNS check successful" message
  4. Tick "Enforce HTTPS" (only available after Let's Encrypt provisions the cert — can take a few minutes)

3. Verification

# DNS check
dig +short selectools.dev
# Should return the four 185.199.10x.153 IPs

# HTTP check (after GitHub Pages settings + cert)
curl -sI https://selectools.dev | head -3
# Should return: HTTP/2 200, server: GitHub.com

Then visit https://selectools.dev — you should see the landing page with all the new animations.

4. Post-merge follow-ups (separate PRs)

  • Update Google Search Console with the new property
  • Submit the new sitemap (https://selectools.dev/sitemap.xml)
  • Update PyPI package metadata if needed (the Documentation URL in pyproject.toml is already updated and will flow through on the next release)
  • Update any external launch posts/blogs in .private/ (out of scope for this PR)

Test plan

Pre-merge — local mobile testing (in progress):

  • Scroll progress bar tracks scroll on iOS Safari
  • Nav hide-on-scroll doesn't fight with iOS rubber-band bounce
  • Stats count-up fires on viewport entry (threshold 0.5)
  • pip copy feedback is satisfying on tap
  • Logo + button hover states don't stick after tap (may need @media (hover: hover) guard as follow-up)
  • Card hover lift visible on tap
  • Docs site admonition/card/link hovers feel right on touch

Pre-merge — desktop:

  • Chrome, Safari, Firefox: count-up, scroll progress, button feedback, logo wink
  • Console shows easter egg message on load
  • System reduced-motion setting disables all animations
  • mkdocs serve docs site — admonitions, cards, code blocks, links
  • Landing pip install selectools button copies to clipboard

Post-merge — domain rollout:

  • DNS records added in Hostinger
  • GitHub Pages "Custom domain" set to selectools.dev
  • HTTPS enforced
  • https://selectools.dev serves the landing page
  • https://selectools.dev/QUICKSTART/ serves the docs
  • https://selectools.dev/builder/ serves the visual builder
  • https://www.selectools.dev redirects to https://selectools.dev
  • Old johnnichev.github.io/selectools URLs still redirect (GitHub auto-handles this)

Regression:

  • mkdocs build succeeds cleanly
  • HTML tags balanced, CSS/JS braces balanced
  • Pre-commit hooks pass (14/14)
  • All 66 URL replacements verified, 0 stragglers in public files
  • site/CNAME and site/sitemap.xml correct after build

What's NOT in this PR

  • Simulation player, hero flow SVG, existing .reveal animations (intentionally untouched)
  • Palette/typography changes (respects existing design system)
  • Bounce/elastic easing, confetti, sound effects (violates .impeccable.md principle feat: v0.16.0 — Memory & Persistence #4 "no visual noise")
  • .private/ blog posts and launch materials with old URLs (out of scope; not user-facing)
  • Workflow file changes (CNAME goes through docs/ → MkDocs copy, no docs.yml edit needed)

Applies /animate + /delight skills following the new .impeccable.md
design context. Nine focused changes across landing page and docs:

  landing/index.html
  - prefers-reduced-motion support (WCAG AA)
  - scroll progress bar + nav hide-on-scroll-down
  - hero stats count-up (152 models, 4612 tests, ...) on scroll-in
  - tactile button feedback (1px press, ease-out-quart, colored glow)
  - pip copy upgraded: text swap, cyan pulse, green success
  - card hover lift (translateY + deeper shadow)
  - nav logo hover wink (3deg rotate)
  - styled console.log easter egg with NichevLabs contact

  docs/stylesheets/extra.css
  - admonition hover lift + shadow
  - card hover lift
  - animated underline on body links
  - code-copy button scale, nav link slide-right, content fade-in
  - matching prefers-reduced-motion block

  .impeccable.md (new)
  - persistent design context: brand, palette, principles, a11y

All motion uses cubic-bezier(0.16, 1, 0.3, 1). No layout-animating
properties (transform/opacity only). Reduced motion fully respected
per the WCAG AA target in .impeccable.md.
Switches the canonical URL from johnnichev.github.io/selectools to
selectools.dev across the entire public surface.

  - docs/CNAME (new) — mkdocs auto-copies to site/CNAME at build time,
    which is what GitHub Pages reads to enforce the custom domain
  - mkdocs.yml site_url
  - pyproject.toml Documentation URL (sbom.json regenerates from this)
  - sbom.json url
  - landing/index.html — canonical, og:url, og:image, twitter:image,
    JSON-LD schema, FAQ answer (6 refs)
  - landing/simulations/index.html (6 refs)
  - docs/llms.txt (37 refs) and llms-full.txt (2 refs)
  - docs/robots.txt sitemap directive
  - docs/QUICKSTART.md, docs/modules/builder.md
  - README.md (5 badges + links)
  - ROADMAP.md, CLAUDE.md, SECURITY.md

66 URL replacements in total. Mechanical find-replace, no other content
changed. Verified `mkdocs build` clean, site/CNAME present, sitemap.xml
emits selectools.dev URLs.

DNS + GitHub Pages settings still required (see PR description).
@johnnichev johnnichev changed the title feat(landing,docs): animation and delight pass with a11y polish feat: animation/delight pass + selectools.dev custom domain Apr 6, 2026
@johnnichev johnnichev merged commit 2a31949 into main Apr 6, 2026
9 checks passed
@johnnichev johnnichev deleted the feat/landing-animation-delight branch April 8, 2026 03:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant