feat(hiiq): rebuild the hiiq page around lock, estimate and decay - #73
Merged
Conversation
The hiiq sections need three marks the homepage set does not carry.
Two diagrams carry the hiiq mechanics: the deposit-to-lock-to-boosted-balance pipeline with the tail its decay follows, and the balance over a lock's lifetime falling from 4x to parity with the line an extension restores.
The estimator needs a readout that moves with its slider, so the sweep is a dashoffset on a normalised pathLength rather than a redrawn arc.
Small boards for the closing grid: rewards splitting out to stakers, and a decorative checklist over the requirements the cell spells out in text.
The lock's orbiting ring, the decay curve's draw-in and marching extend line, the gauge sweep and the requirement checks. Reduced motion drops the gauge's transition too, since its arc is driven by state rather than a keyframe.
Both engines share one track rule by painting the filled half with a gradient stop parked at --range-pct, which the estimator keeps in sync with its value.
The old block only covered a hero and a stats line. The rebuilt page adds the mechanism board, the estimator, the decay section and the closing grid, so the whole hiiq namespace is replaced. Lock durations are ICU plurals because the estimator renders them for both the readout and the slider ticks.
A centred hero over a masked grid, with the four claims about hiiq as mono chips, and a two-cell band for the locked IQ and the hiiq outstanding.
The slider runs 1 to 208 weeks and the boost is the veCRV curve itself, 1 + 3 * weeks / 208, so the duration readout, the hiiq amount and the gauge cannot disagree — two years reads 2.5x on 2,500 hiiq.
The route keeps its metadata and the two chain reads, and the prose it used to render inline now lives in the sections themselves. The new anchors join the group carrying the navbar's scroll offset.
.val and .val-p carry a font-size, and a class beats a presentation attribute, so both boards were rendering their headline values at the caption size. The sizes move inline, the gauge's end ticks drop clear of the arc it was drawing them on, and the lock board loses the dead space under its decay tail.
At phone width the five duration ticks overlap, so the odd ones hide below sm and the track keeps its start, midpoint and end.
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
The eyebrow goes neutral, the description steps up to 16px so it wraps to three lines, the CTA pair takes the hero's size instead of the shared footer pill, and the chip row widens to the mock's gap. The grid backdrop widens with the headline.
Dropping the negative inset puts the cells in the same column the rest of the page's copy starts at, which lands the divider on the centre line, and the value takes the design's 28px.
The board was too flat: the lock was the same size as the two ends when the design makes it the focal node carrying the board's height, and the boosted balance read left-aligned in its node. Rescales every node to the mock, centres the balance, and leaves the token's name in its own case.
At 375 the board scaled down to 293px, which put its captions under 6px. It now holds its width and the panel bleeds to the screen edge to scroll.
The ring's own travelling arc already carries the motion, and the dot read as a second, unrelated animation.
The ring nearly met the node's top edge and its caption sat right under the arc. The ring loses a little radius, the node gains height, and the caption drops below the other two.
The tail was the one static piece of the board. Its dashes now march toward the expiry label and the balance's dot rides down them and fades, on the same clock, so the decay reads as leaving the boosted balance.
A 4px track under an 18px knob; at 2px the filled half read as a hairline next to the panel's other rules.
The design draws the arc as a neon tube rather than the boards' flat strokes; a drop-shadow on the arc alone carries that.
Four faint dots sit just off the tube in the design; the box grows a hair in each direction to hold them without clipping.
The tube is white-hot inside its pink glow, not a flat pink stroke: a white core path rides the same dashoffset as the arc beneath it.
The design gives the slider and the receive row more air than the boards' stock spacing; the panel lands at its ~350px height.
The fan gets the design's tall symmetric sweep: curved rays that leave the arrowhead flat and arrive flat at each staker dot, a grey-bordered pill, and no pulse dashes. The checklist's squares are bare grey outlines with a big static pink check — the one pink thing on the row. Both boards share a fixed slot so the card headings sit on one line, and the source footnote goes, matching the mock.
The lit arc read as a bar filling and holding, which fought the pink readout underneath it. Cut the dash to a short glint and walk it along the swept arc with a hold at each end, so the gauge shows a light travelling rather than a level rising. Faster and thinner to match.
The travelling glint is the head now, so the dot riding the arc's end was a second marker for the same thing. Takes its rotation rule and its reduced-motion entry with it.
Simplypheyie96
approved these changes
Aug 20, 2026
invisiblemask
added a commit
that referenced
this pull request
Aug 21, 2026
Brings in the HiIQ page rewrite from #73. The only conflict was the import block in app/[locale]/hiiq/page.tsx: the page now composes from components/layouts/hiiq/* instead of section-kit, so the old section-kit import goes and `alternatesFor` stays. Git had already merged the body, keeping generateMetadata's canonical alongside the new section list.
This was referenced Aug 21, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes https://github.com/IQIndustries/issues/issues/5201 and https://github.com/IQIndustries/issues/issues/5202 when this PR merged
Continues the restructure on
restructure/iq-hiiq-scopeby giving/hiiqthe samesystem as the redesigned homepage.
What changed
chips (
4× max boost,veCRV model,non-transferable,rewards in IQ).from
getTvl()/getLockOverview().with the dashed tail its decay follows.
boost is the veCRV curve itself,
1 + 3 × weeks / 208, so the duration readout,the HiIQ amount and the gauge cannot disagree (2 years reads 2.5× on 2,500 HiIQ).
dashed line an extension puts the balance back on.
The route is now just a composition root; each section lives in
src/components/layouts/hiiq/, and the four new diagrams join the existing.illscope in
globals.css.Notes
estimator renders them for both the readout and the slider ticks.
hiiqmessage namespace is replaced — the oldcta,stats.lockedstring and
sections.*keys are gone.Verification
npx tsc --noEmitandbiome checkclean.gauge sweep move together, focus is retained.
fixes that pass turned up: the boards' headline values were being sized by the
.illclasses rather than their own attributes, and the estimator's five sliderticks collided at phone width.