Colors
tap a color to copy the hex
components
Pieces that respond.
Buttons, fields, cards and the motion of this site, loose for you to try. It’s the same care I bring to every interface: instant feedback, clear states, keyboard and touch that work, and no library.
components/tokens
The vocabulary before the pieces.
Color, type and timing defined once and used everywhere. It is the same token file that paints this site.
Type
Cascadia Code, a single family
Aa heading · 700
Section subheading · 350
Body text reading · 400
meta and caption muted · 13px
Timing
tap to see each duration with the site curve
160msresponse
240mscontent
520mscover → case
440msreturn
components/buttons
Buttons that respond.
Every tap gets instant feedback: color, a short shift, a ripple or a new state. Nothing sits still without telling you what is happening.
Primary, secondary and link
default · hover · focus · pressed · disabled
With loading
default → sending → sent · blocks double click
Click ripple
starts where you tap and reaches the page background
Magnetic
moves toward the pointer · stays still on touch and with reduced motion
Segmented
single choice · indicator slides · arrow keys switch
showing: day
Icons and sizes
tooltip on hover, focus and tap · 44px target
components/fields
Fields that help you fill them in.
The error shows up when it makes sense, explains what is missing and goes away once the problem is fixed. The phone keyboard opens in the right type.
Floating label with validation
empty · focus · filled · error · valid
Checks when you leave the field.
Password with strength
hidden · visible · weak → strong
Search with live results
/ focuses · arrows navigate · enter opens · searches this site
/
Checkbox, radio, switch and select
checked · unchecked · focus · on · off
notifications
Slider and counter
live value · warning near the limit · over the limit
Verification code
advances on its own · goes back on delete · accepts pasting the whole code
Type any 6-digit code.
components/cards
Cards with depth.
Light that follows the pointer, numbers that count up as they appear and the card that becomes a page: the same transition that opens the cases on this site.
Light that follows the pointer
light and border follow the cursor or finger · tilts 2° on desktop
Expense management
Balance, credit and top-ups in the same panel, with filters that respond instantly.
Media with scan line
light line on hover, focus or when it enters the screen
Metrics that count
count when they enter the screen · line draws the half-year
credit over the half-yearR$277,898.04
top-ups over the half-yearR$225,965.76
kept on the platformR$51,932.28
Fictional data, the same as in the Aly+ demo.
Card that becomes a page
the cover travels to the detail and back · esc closes
app + site + dashboard
Aly+
Digital account for managing corporate cards and payments: incentives and expenses, virtual cards for ads (AlyAds) and batch Pix transfers to suppliers and employees.
front-end + design system
El Mago
Diablo 4 item store: server selection, filters by item type, search, quantity and cart, plus an affiliate area. From the interactive prototype to the front-end in Next.js.
low-code + back-end + seo
Agrolumina
Website for an agribusiness consultancy accredited by Banco do Brasil, focused on rural credit in Sertãozinho, Ribeirão Preto and the surrounding region. Low-code for the site, back-end for SEO.
components/feedback
Inform without getting in the way.
Messages that explain themselves and go away on their own, loading that shows real progress and dialogs that return focus to where you were.
Notices (toasts)
success · error · info · pause on hover · close on × · screen reader announces
Loading
determinate · indeterminate · skeleton
uploading files0%
João Victor Cruz
designer and full-stack developer
Confirmation dialog
opens with a short zoom · esc or backdrop close · focus returns to the button
Status badges and tooltip
live · warning · error · tooltip on hover, focus or tap
in productionin reviewfaileddraft
CLS: how much the layout jumps
components/motion
The animations on this site.
The motion signatures you saw along the way, isolated. They all start from an action of yours and respect those who prefer less motion.
Text that decodes itself
glyphs settle from left to right · type your own word
jvcrz
Background wave
the glyph field behind the page, in canvas · starts at the button
Move the mouse or tap anywhere: the whole background is this component.
Scan line
sweeps over the cover when hovering the home cards
Terminal line
types only when you ask · phosphor cursor
jvcrz@jvcrz.dev:~$
Want pieces like these in your product?
Hit me up on LinkedIn and tell me what you’re building.