Abi vault - Devlog 4

This Section was mainly about adding cool effects with Tailwind CSS and refining the UI further. I also used Figma to design the card and saved it as an SVG.

Figma

This was quite simple and fast. I used references from cards like the ones Klarna uses and designed the card from there. To give it a more metallic look, I used a linear gradient with three stops at a certain angle. The problem was that I worked in the Figma app instead of the browser, and the browser connection kept disconnecting and reconnecting. so i coudlnt track hackatime for it/

Cards

The cards are combined with SVG and TSX. The SVG is responsible for the background, including the gradient, border, and rounded corners. The card text is rendered separately in TSX and positioned above the SVG using a layered container. This allows the account name, number, card holder, expiry date, and color to change dynamically.

Visual effect

The visual effects include a subtle 3D tilt that reacts to the mouse position. The code calculates the mouse position relative to the card and converts it into tilt values for the X and Y axes. These values are saved as CSS variables and used by rotateX() and rotateY().

const relativeX =
  (event.clientX - bounds.left) / bounds.width;

const relativeY =
  (event.clientY - bounds.top) / bounds.height;

const rotateX = (0.5 - relativeY) * 8;
const rotateY = (relativeX - 0.5) * 8;

event.currentTarget.style.setProperty(
  "--tilt-x",
  `${rotateX}deg`
);

event.currentTarget.style.setProperty(
  "--tilt-y",
  `${rotateY}deg`
);

When the mouse leaves, the card resets to 0deg. It also has a diagonal light-sweep animation and slightly lifts on hover. The white card uses a separate metallic gradient and darker shine.

Card Logic

Cards are stored in React state, and cardIndex controls which card is visible. The modals allow cards to be added, edited, or deleted. Currently, cards reset after refreshing and will later be saved in a database connected to the Clerk user or class.

Results

Iam pretty proud of myself of the result though I did have to use AI for how to create the Card logic so the text is interactive at first I thought about redrawing the SVG everytime as i did sth smiliar in my README but that didnt make sense, so i asked AI as for the darkmode i needed to watch some tuts and for the same for the tilt and a bit of AI for it