# Craft

- [3D Card](https://faisalhusa.in/craft/3D-card.md): In this craft, I share my learnings about 3D CSS and create a 3D ATM Card with help of VanillaCSS and TailwindCSS.

- [3D Cube](https://faisalhusa.in/craft/3D-cube.md): Build a Rubik cube in Tailwind v4, one face at a time, then drag it.

- [3D Flippy Card](https://faisalhusa.in/craft/3D-flippy-card.md): In this craft, I share my learnings about 3D CSS by creating a 3D Flippy Cards animation and some maths behind it.

- [Animated Cards](https://faisalhusa.in/craft/animated-testimonial.md): In this craft, we will create a testimonial card that flips on clicks and shows the testimonial.

- [Dot Matrix Ticker](https://faisalhusa.in/craft/dot-matrix-ticker.md): Turn plain text into a configurable LED matrix, one Tailwind layer at a time.

- [Ribbon At Corner](https://faisalhusa.in/craft/ribbon-at-corner.md): In this craft, I share my learnings about creating a ribbon at corner of card.

- [SVG Text Animation](https://faisalhusa.in/craft/svg-text-animation.md): We will break the down the approach of building this effect .

- [Tasteful Button](https://faisalhusa.in/craft/tasteful-button.md): How a flat shadcn button becomes a Clerk-like control, one Tailwind class at a time.

- [Tile Effect](https://faisalhusa.in/craft/tile-effect.md): We will break the down the approach of building this effect .

- [Waving Flag](https://faisalhusa.in/craft/waving-flag.md): Cut a flag into columns, stagger the motion, and it starts to look like cloth.

- [Zoom Parallax Effect](https://faisalhusa.in/craft/zoom-parallax.md): We will break the down the approach of building this effect .

Original page: https://faisalhusa.in/craft