KironX Landing Page
🎂 A small personal note
This landing page was built through a lot of iteration. Try, fail, tweak. Components rewritten, motion retuned, copy adjusted again and again.
Nothing here is theoretical, this code shipped.
I never planned for it to win a CSS Winner Star. It just happened along the way.
I honestly don’t know how much a landing page like this would cost if you hired an agency. But today is my birthday, and instead of keeping this code private, I decided to share it.
Maybe today I give myself a gift by releasing it. Maybe tomorrow someone will tell me: “I won a CSS Winner too, inspired by this code.”
If that happens, that’s more than enough for me.
If you find it useful, feel free to star or fork it, that really helps.
Buil…
KironX Landing Page
🎂 A small personal note
This landing page was built through a lot of iteration. Try, fail, tweak. Components rewritten, motion retuned, copy adjusted again and again.
Nothing here is theoretical, this code shipped.
I never planned for it to win a CSS Winner Star. It just happened along the way.
I honestly don’t know how much a landing page like this would cost if you hired an agency. But today is my birthday, and instead of keeping this code private, I decided to share it.
Maybe today I give myself a gift by releasing it. Maybe tomorrow someone will tell me: “I won a CSS Winner too, inspired by this code.”
If that happens, that’s more than enough for me.
If you find it useful, feel free to star or fork it, that really helps.
Built for KironX — an Engagement Radar for X (Twitter), focused on organic growth without bots. https://www.kironx.com
- CSS Winner-worthy landing built through a lot of iteration, try-and-error polish, and hand-tuned motion.
- Featured on CSS Winner: https://www.csswinner.com/details/kironx-organic-growth-for-x/19002
- Storytelling scroll with parallax cards, sticky timelines, custom cursor, and animated hero that showcase KironX (organic X/Twitter growth without bots).
- Built on Next.js App Router with Tailwind CSS v4, GSAP ScrollTrigger/ScrollSmoother, and a11y-first screen-reader copy.
What you get
- Main entry in app/[locale]/page.tsx rendering components/HomeShell.tsx with the full journey (hero, sticky “How it works,” scroll journey, parallax stacks, pricing, footer).
- Motion stack: GSAP + ScrollTrigger/ScrollSmoother, plus Lenis-like smoothness; image loading guarded by ImagesLoaded; Next/Image for perf.
- Styling: Tailwind v4 utilities, layered gradients, clamped sizing, responsive grids; minimal CSS modules left only where utilities are verbose.
- Content: Markdown legal pages in content/ rendered via components/MarkdownRenderer, copy variants per locale under messages/ and runtime locale resolution via i18n/request.ts.
- UX touches: Custom cursor, flashlight hero, sticky cards, scroll beam, animated transitions, CTA install button for the KironX Chrome extension.
Run it locally
npm install
npm run dev
# http://localhost:3000
Scripts
npm run dev– start Next.js dev servernpm run build– production buildnpm run start– serve the built appnpm run lint– ESLint (Next config)
Tech stack
- Next.js 16 (App Router), React 19
- Tailwind CSS v4, PostCSS, Autoprefixer
- GSAP + ScrollTrigger/ScrollSmoother, imagesloaded
- next-intl for locale handling
- Zustand for lightweight client state
Notes
- This codebase is intentionally experimental: many motion details were tuned by hand to reach CSS award quality. Expect bespoke values and carefully clamped sizes rather than pure utility defaults.
- If you adapt it, keep an eye on scroll performance (prefer
will-change: transform, avoid heavy box shadows on large layers) and image sizing.
Deploy
- Standard Next.js deploys (Vercel recommended). Ensure env vars for analytics or i18n are set if you add them.
If you’re curious about what this landing was built for: → https://www.kironx.com