Hi, Javi here.

I'm a software engineer with a passion for great user experiences.


  1. ClearSessionat
    A health app focused on communication
  2. at
    An innovative online school
  3. at
    An online education platform
  4. at
    A web app for remote retrospectives

Open Source (7)

  1. tailwind-material-colors

    A TailwindCSS Plugin to generate dynamic color themes according to the Material Design guidelines.
  2. ☝️ A customizable input-like component with line wrapping and autosizing.
  3. tailwindcss-color-mix

    A TailwindCSS Plugin to mix colors at runtime using the CSS color-mix function.
  4. tailwind-material-surfaces

    A TailwindCSS Plugin that integrates Material Design interaction states into Tailwind.
  5. tailwind-mode-aware-colors

    A TailwindCSS Plugin to style light and dark modes with a single class.
  6. react-selection-manager

    A tiny selection management library with support for keyboard modifiers.
  7. MTGBarato

    I built a simple web app to help my local trading card game community.

Blog posts (8)

  1. CSS Animated Gradient Button

    The method behind the animated gradient button on this page, with a detailed step-by-step walkthrough.

    Read the post
  2. CSS-only DVD Screensaver animation: a visual walkthrough

    An in-depth look at how I created a DVD screensaver animation without any Javascript, presented with dynamic examples and code snippets.

    Read the post
  3. Prioritizing High-leverage Activities

    An opinion piece about productivity habits and considering automation for repetitive tasks. Inspired by the book The Effective Engineer by Edmond Lau.

    Read the post
  4. Material interaction states with Tailwind

    A deep dive into my plugin to style interactive surfaces with Tailwind according to the Material Design guidelines.

    Read the post
  5. Mode-aware colors with Tailwind

    The reasoning behind my tailwind-mode-aware-colors plugin and a quick look into its internals.

    Read the post
  6. Optimizing expensive React component mounts

    How we fixed a performance problem and improved metrics by 92% in a real-time React application thanks to reverse portals.

    Read the post
  7. Screenshot testing React components with Viteshot

    How and why I set up a GitHub action to take screenshots of components in the Prisma UI library.

    Read the post
  8. Harnessing the power of responsive CSS grids

    A fun experiment with a product pricing table that changed drastically between viewport sizes.

    Read the post

Dev notes (18)

I had a lot of fun building this website and getting to use a few techniques I've learned through the years, as well as some new browser features.

To see the dev notes, please use a larger screen. I'm sorry for the incovenience.

Drop me a line at hi@javiermorales.dev ✉️