GET /llms.txt

· what an AI agent reads on this siteRaw
# Lucas Bonomi> Lucas Bonomi (LukyVj) is a creative developer and design engineer in Paris. I build things with CSS, sometimes things that probably shouldn't be built with CSS — and then I tell the rest of the industry they can do it too.Machine-readable version of https://lucasbonomi.com. Full JSON: [/api/site](https://lucasbonomi.com/api/site).## AboutI joined Algolia in 2016 as employee #22 and grew from frontend developer to Senior Developer Relations Engineer, leaving in July 2025. I built interfaces, technical demos and tools that helped developers explore what search could do.Today I work across frontend engineering, creative development and developer advocacy. My work includes CSS playgrounds, open-source tools, design systems and experiments connecting code, design and AI.Stack: CSS, Vanilla JS, React, Next.js, Astro, Three.js, Algolia, Figma, Design Systems, DX, Public Speaking, Writing## Now- **Now**: Paris, FR- **Craft**: Frontend · CSS · creative development- **Open source**: [@LukyVj](https://github.com/LukyVj)- **Community**: [Paris Design Meetup](https://design-meetup.com)- **Exploring**: WebGL · AI · design workflows## Companies- [Algolia](https://www.algolia.com/)- [Sketchfab](https://sketchfab.com/)- [Altertable](https://altertable.ai/)## Work- [GSS (Language / GPU)](https://gss-lang.dev): GSS stands for GPU Style Sheets. · GPU Style Sheets- [Skillify (Product / AI)](https://getskillify.dev): Turn a technical URL into a Claude Agent Skill.md or a self-contained HTML file for teams and LLMs. Browser-only: BYO Anthropic, OpenAI, or Google key. No account. · URL → Agent Skill- [Buttons.cool (Playground / Interaction)](https://buttons.cool): A collection of buttons with a cool hover effect  · CSS interactions- [MadamNazar.io (Game tool / RDR2)](https://madamnazar.io): This website is a project I'm having a lot of fun with, it's sole purpose is to show the location of a NPC in the Online game Red Dead Redemption · NPC locator- [BlurHash Playground (Experiment / Images)](https://blurhash-playground.vercel.app/): I've built this small app to play around with the BlurHash format, you can upload images and get their blurash representation either as images, CSS background or more! · BlurHash playground- [Family.scss (Open source / Sass)](https://lukyvj.github.io/family.scss/): Family.scss is a set of SCSS mixins that will help you master the use of nth-child elements with CSS! · CSS selectors · 2k+ stars- [Colorify.js (Open source / JavaScript)](https://lukyvj.github.io/Colorify.js/): [DEPRECATED] Colorify is one of my biggest 1st JS project, it's a script that will return a color/gradient based on images on a page.  · Color extraction## Talks & videos- [From Query to Cube](https://www.youtube.com/watch?v=E6XtviDPcJw): Speaker · Algolia DevBit · 3D / Search · Visualizing search in a 3D voxel world with Three.js and Algolia.- [CSS Flicks](https://www.youtube.com/watch?v=D5apg0KoC2Q): Speaker · Algolia · CSS / Video · Creating video experiences with Algolia — storing and playing motion through CSS and search.- [Building SwagSearch](https://www.youtube.com/watch?v=s8rvFhZGlZM): Speaker · Algolia · Frontend / Product · A walkthrough of building a real-time discovery platform for conference swag.- [SwagSearch, live with Chuck Meyer](https://www.youtube.com/watch?v=P3-z8Kd2DYw): Co-host · Algolia DevChat · Developer relations · Questions, implementation choices and a live tour of the application.- [Creating a r/place clone with Algolia](https://www.youtube.com/watch?v=gxLmaJ0mlXE): Speaker · Algolia DevCon · Creative coding · Building a collaborative pixel-art canvas with search infrastructure.- [Family.scss & successful open source](https://www.youtube.com/watch?v=Slk_T4ap2AA): Speaker · CSS Paris #6 · Open source / CSS · How Family.scss grew, and lessons on shipping open-source CSS tools.- [CSS Paris: blend modes, filters & video](https://www.youtube.com/watch?v=WyFGfMFjfH4): Speaker · CSS Paris · CSS / Video · A shared meetup recording including experiments with CSS blending, filters and video.- [Paris Design Meetup #2](https://www.youtube.com/watch?v=uELHULixPNE): Organizer & host · 2024 · Design / Community · The full event recording: design talks, community and opening remarks.- [Paris Design Meetup #3](https://www.youtube.com/watch?v=DLFBliJr5L8): Organizer · Design workflows supercharged with AI · On May 28th, Paris Design Meetup returned for a special evening dedicated to the evolving relationship between AI and design. Hosted at Jitter’s colorful office in the heart of Le Marais, this edition brought together designers, product people, creative technologists, and AI-curious builders for talks, demos, portfolio showcases, job opportunities, food, drinks, and conversations around the future of creative workflows.## Articles- [Building Swagsearch: Crafting a real-time swag discovery platform](https://lucasbonomi.com/writing/building-swagsearch): 2025-04-29 · originally on Algolia · How we built SwagSearch — a real-time conference swag discovery app — with Next.js and Algolia in 45 days.## Writing- [Building Swagsearch: Crafting a real-time swag discovery platform](https://www.algolia.com/blog/engineering/building-swagsearch): Algolia · 2025 · Engineering- [How I recreated r/place with Algolia](https://www.algolia.com/blog/engineering/how-i-recreated-r-place-with-algolia/): Algolia · 2022 · Engineering- [Recreating AlterTable.ai cards with modern CSS](https://codepen.io/LukyVj/full/YPXGpWy): CodePen · 2025 · Demo- [Futuristic Dial Button](https://dev.to/lukyvj/futuristic-dial-button-3d8e): DEV · 2023 · CSS Demo- [Subtle rainbow gradient buttons](https://dev.to/lukyvj/subtle-rainbow-gradient-buttons-4lp1): DEV · 2023 · CSS Demo- [Tilt playing card](https://dev.to/lukyvj/tilt-playing-card-30k9): DEV · 2023 · CSS Demo- [Sharp & Glowing dark card](https://dev.to/lukyvj/sharp-glowing-dark-card-chrome-only-5g90): DEV · 2023 · CSS Demo- [Grainy & Gradients text](https://dev.to/lukyvj/grainy-gradients-text-chromepen-52g5): DEV · 2023 · CSS Demo- [The new Pandicons](https://medium.com/@lukyvj/the-new-pandicons-6ced6a512d03): Medium · 2015 · Archive- [An introduction to Gulp.js](https://medium.com/@lukyvj/an-introduction-to-gulp-js-295ee489e2c9): Medium · 2015 · Archive- [How to Create a Metro Style Accordion](https://medium.com/@lukyvj/how-to-create-a-metro-style-accordion-5eb3e1afe780): Medium · 2014 · Archive- [How I animated Color-Template](https://medium.com/@lukyvj/how-i-animated-color-template-4f45dc4e9410): Medium · 2014 · Archive## Experiments- [Shadow Vision](https://shadow-vision.vercel.app/): CSS · users can adjust the "y + x" slider to modify the shadow's angle and toggle the animation feature to observe the shadow's dynamic behavior. This interactive tool exemplifies how the Houdini Paint API enables developers to craft custom CSS properties and effects, enhancing the capabilities of traditional CSS.- [Algo Flix](https://algo-flix.vercel.app/): Algolia · AlgoFlix is an experiment that renders small videos in CSS- [r/place with Algolia](https://algolia-canvas.vercel.app/): Algolia · A re-creation of the Reddit April Fools' Day event, r/place, using Algolia as the backend- [Video to CSS Box shadow](https://videos-css-box-shadow.vercel.app/): CSS · This experiment converts a video into a CSS box-shadow- [colorify 2](https://colorify-two.vercel.app/): Misc · Colorify 2 is a project that takes an image and generates a color palette from it- [Hair Salon Search](https://hair-salons.vercel.app/): Algolia · A search experience for hair salons in Paris- [Pageviews counter with Algolia](https://algolia-pageviews-counter.vercel.app/): Algolia · A simple pageviews counter using Algolia- [BlurHash Playground](https://blurhash-playground.vercel.app/): CSS · I've built this small app to play around with the BlurHash format, you can upload images and get their blurash representation either as images, CSS background or more!- [RandomiCSSer](https://github.com/LukyVj/randomiCSSer): CSS · RandomiCSSer is a project that generates random numbers as css variables## CodePen- [MistralAI €3bn announcement](https://codepen.io/LukyVj/pen/dPvMgbY)- [Expanding corners button](https://codepen.io/LukyVj/pen/LENVMBj): Props to temani_afif for his amazing post https://css-shape.com/corner-only/- [Success morphing button](https://codepen.io/LukyVj/pen/RwXGPyO): Modern css techniques, no JS needed- [Glassy button + Popover ](https://codepen.io/LukyVj/pen/yLmJMyr): Reproduced the Glassy button from Markus on Dribbble: https://dribbble.com/shots/23129994-Glassy-button Thanks https://x.com/ChallengesCss for the help with anchor positioning- [Fitness inspired loaders](https://codepen.io/LukyVj/pen/rNqvowZ): Some Apple's Fitness inspired loaders using CSS cos() & sin() functions. Twitter thread: https://twitter.com/LukyVJ/status/1658572588078059520- [One div - Rotating hexagon gradient border](https://codepen.io/LukyVj/pen/GRYdPmo): A simple hexagon with a rotating gradient border- [Futuristic Dial Button ☎](https://codepen.io/LukyVj/pen/xxyEYMJ): A futuristic dial button inspired by: https://twitter.com/JoshGuoSpace/status/1648259938110836738 Find the twitter thread here: https://twitter.com/LukyVJ/status/1650128063672229889- [Subtle rainbow gradient buttons](https://codepen.io/LukyVj/pen/bGmELYR): Some subtle rainbow colored buttons that reveals a nice gradient border & overlay ✨ See the thread about it: https://twitter.com/LukyVJ/status/1646927645425164313- [Button with glow & particles ✨](https://codepen.io/LukyVj/pen/abRbqgy): Inspired by https://twitter.com/adrienrochet/status/1642127496823930882 The particle animations are made with SVG Twitter thread: https://twitter.com/LukyVJ/status/1644780864394412035- [Old School Calculator ](https://codepen.io/LukyVj/pen/dyqEEdL): Inspired by this tweet: https://twitter.com/SebastienNvzt/status/1641419150718390272- [Skeuo-futuristic-slider](https://codepen.io/LukyVj/pen/NWLJjra): A kind of skeuomorphic & futuristic interface 🤖 🐦 Twitter thread: https://twitter.com/LukyVJ/status/1641748031086161920 Inspired by this Dribbble post: https://dribbble.com/shots/7887362-Black-Magic-Mode The only JS is used to set the `--value` css variable. All the rest is CSS & SVG --------- - Got the particles logic from: https://codepen.io/robinselmer/pen/mRjoXr ( Thanks @robinselmer ) - Found the SVG technique for the "liquid" effect while searching a good replacement, initially I did it with a canvas, but I wanted to avoid using too much JS for this pen. Here's what I've found https://redstapler.co/realistic-water-effect-svg-turbulence-filter/- [Fun 3D button](https://codepen.io/LukyVj/pen/oNPJrdy): Inspired by this tweet: https://twitter.com/aleksliving/status/1635306125393551360- [✉️  Super fast icon inspired design](https://codepen.io/LukyVj/pen/rNZvLyN): ✉️ Based on this design: https://layers.to/layers/clf4icve1000bl20g0ag02eng- [Glowing Dropdown ](https://codepen.io/LukyVj/pen/ZEMrgMr): Inspired by this tweet of @UI8 https://twitter.com/ui8/status/1633368459319885825 Find my twitter thread: https://twitter.com/LukyVJ/status/1635693759714164736?s=20 Chrome: ✅ Safari: 🟧 Firefox:- [Glowing Tabs - Chrome Only ](https://codepen.io/LukyVj/pen/RwYjLwZ): Inspired by this tweet: https://twitter.com/madebyharsh/status/1633459657133158400- [Glowing button | SCSS nesting](https://codepen.io/LukyVj/pen/vYzXNev): Inspired by this tweet: https://twitter.com/stfnco/status/1628394304866508803?s=20- [Skeuomorphic like button | SCSS nesting](https://codepen.io/LukyVj/pen/XWPKvjP)- [Skeuomorphic like button | Native nesting](https://codepen.io/LukyVj/pen/PodzOmM): 👋😎 Hey there! Check out this cool skeuo-like button inspired by https://twitter.com/learnframer/status/1628666069144698880 Packed with: - #CSS variables ✅ - Native nesting ✅ - Custom properties ✅ - A sprinkle of keyframes animations ✨ WDYT? 🤓🤔- [Sliding Button](https://codepen.io/LukyVj/pen/bGxpORa)- [Sharp & Glowing dark card | Chrome only](https://codepen.io/LukyVj/pen/YzOXepM): Based on this tweet: https://twitter.com/aleksliving/status/1620874863690014721?s=20 Please note that this pen uses CSS @property for that is not yet available everywhere, I’ll make a cross browser version. Best viewed in chrome- [CSS Clock-Shadows](https://codepen.io/LukyVj/pen/qBygROW): I had a lot of fun creating these little CSS clocks! Inspired by my Alexa Echo Dot, Let me tell you this, writing all these box shadows manually was tedious! Let me know what you think and all improvements suggestions are welcome! Cheers- [Twitter Profile](https://codepen.io/LukyVj/pen/ZbEvmp): Dribbble to implementation. Designer : Paul Flavius Nechita Original image :## CommunityI build communities as well as interfaces.I organize Paris Design Meetup with Sébastien Navizet, bringing designers, developers and creative technologists together for talks, demos and conversations.Our May 2026 edition at Jitter explored design workflows and AI, with Mathieu Boulet, Célia Lopez and Kim Köhler. My role: organizing the event and creating a space for these voices.[Explore Paris Design Meetup ↗](https://design-meetup.com)## What people say> I've met gifted people, but Luky is one of the few true CSS wizards I know. He's highly imaginative, and he's always down to use new features and cutting-edge APIs to show you that, yes, this is possible in CSS. His enthusiasm and energy are refreshing, and everyone secretly aspires to be as cool as he is.>> ✷ Sarah Dayan, Principal Software Engineer> Luky is the dream partner in crime for a designer, always keen to implement the craziest designs. He is never afraid to explore new techniques, with a rare sense of detail and aesthetics. The best part is that in the end, you end up with an even cleaner look than the initial design!>> ✷ Sebastien Navizet, Freelance creative director> Working with Lucas has been one of the most flawless collaboration I've had as a designer. Constantly paying attention to details, crafting pixel-perfect experiences, he's not afraid to go above and beyond to be proud of the final result, which is a quality inherent to passionated workers I love working with.>> ✷ Nicolas Meuzard, Product Designer> Among all the stars in the galaxy, the shiniest is called Luky. If you see it, make a wish for your next project and the sparkles of his creativity will bring life to your craziest dreams. Luky is the magic sauce.>> ✷ Kevin Granger, Head of growth & development journey> I've had the chance to work with Lucas for many years, and all I can say is that every minute of it was a blast. Not only is he an incredible, funny and humble human being, but he also has a hacking mindset that helps him push his limits further and further. Lucas is truly a front-end expert with crazy CSS skills, and he always delivers pixel-perfect web experiences which are simply delightful to explore.>> ✷ Ronan Levesque, Engineering Manager> >> ✷ Nom## Open source[@LukyVj](https://github.com/LukyVj) on GitHub · 173 public repos · 6,337 contributions- [family.scss](https://github.com/LukyVj/family.scss)- [colofilter.css](https://github.com/LukyVj/colofilter.css)- [Colorify.js](https://github.com/LukyVj/Colorify.js)- [cloudinary-blurhash](https://github.com/LukyVj/cloudinary-blurhash)- [videos-css-box-shadow](https://github.com/LukyVj/videos-css-box-shadow)## Recent posts on Bluesky- [No Title](https://bsky.app/profile/lukyvj.bsky.social/post/3mxovzsfma22s)- [No Title](https://bsky.app/profile/lukyvj.bsky.social/post/3mxlkwhumis2h)- [No Title](https://bsky.app/profile/lukyvj.bsky.social/post/3mxhfatqxik2e)- [No Title](https://bsky.app/profile/lukyvj.bsky.social/post/3mxgswhtdq22s)- [No Title](https://bsky.app/profile/lukyvj.bsky.social/post/3mxgfzryamk25)## Contact- [GitHub](https://github.com/lukyvj)- [LinkedIn](https://www.linkedin.com/in/lucas-bonomi-lukyvj)- [X (Twitter)](https://x.com/lukyvj)- [Instagram](https://www.instagram.com/lukyvj/)- [CodePen](https://codepen.io/lukyvj)

Paris · Planet mode

Creative Developer / Design Engineer / Growth EngineerBringing ideas to life, one project at a time.

Enter the work

LucasBonomi

NowParis, FR
CraftFrontend · CSS · creative development
Open source@LukyVj
CommunityParis Design Meetup
ExploringWebGL · AI · design workflows

Explore selected projects through live demos, visuals, and hands-on interactions.

Language / GPU01

GSS

GSS stands for GPU Style Sheets.

Skillify turning a technical URL into an agent skill.
Product / AI02

Skillify

Turn a technical URL into a Claude Agent Skill.md or a self-contained HTML file for teams and LLMs. Browser-only: BYO Anthropic, OpenAI, or Google key. No account.

Interaction studyCSS
Hover, focus or tap to try.
Playground / Interaction03

Buttons.cool

A collection of buttons with a cool hover effect

Locator studyRed Dead Online
Today: Bluewater Marsh
Game tool / RDR204

MadamNazar.io

This website is a project I'm having a lot of fun with, it's sole purpose is to show the location of a NPC in the Online game Red Dead Redemption

Image studyBlurHash
3×2 components · 16-char hash
Experiment / Images05

BlurHash Playground

I've built this small app to play around with the BlurHash format, you can upload images and get their blurash representation either as images, CSS background or more!

Selector studySass
:nth-child(odd)
Open source / Sass06

Family.scss

Family.scss is a set of SCSS mixins that will help you master the use of nth-child elements with CSS!

Color studyJavaScript
#B5CF85
Open source / JavaScript07

Colorify.js

[DEPRECATED] Colorify is one of my biggest 1st JS project, it's a script that will return a color/gradient based on images on a page.

I build things with the web, sometimes things that probably shouldn't be built with the web ✷ and then I tell the rest of the industry they can do it too.

Fig 0.3 · Hover to take it apart, click to share itTap to take it apart and share it

I joined Algolia in 2016 as employee #22 and grew from frontend developer to Senior Developer Relations Engineer, leaving in July 2025. I built interfaces, technical demos and tools that helped developers explore what search could do.

Today I work across frontend engineering, creative development and developer advocacy. My work includes CSS playgrounds, open-source tools, design systems and experiments connecting code, design and AI.

CSSVanilla JSReactNext.jsAstroThree.jsAlgoliaFigmaDesign SystemsDXPublic SpeakingWriting

Three living pieces up front. The long tail stays in the archive ✷ frontier first, history on demand.

Archive10 more
Video thumbnail for From Query to Cube
Speaker · Algolia DevBit01

From Query to Cube

Visualizing search in a 3D voxel world with Three.js and Algolia.

Video thumbnail for CSS Flicks
Speaker · Algolia02

CSS Flicks

Creating video experiences with Algolia — storing and playing motion through CSS and search.

Video thumbnail for Building SwagSearch
Speaker · Algolia03

Building SwagSearch

A walkthrough of building a real-time discovery platform for conference swag.

Video thumbnail for SwagSearch, live with Chuck Meyer
Co-host · Algolia DevChat04

SwagSearch, live with Chuck Meyer

Questions, implementation choices and a live tour of the application.

Video thumbnail for Creating a r/place clone with Algolia
Speaker · Algolia DevCon05

Creating a r/place clone with Algolia

Building a collaborative pixel-art canvas with search infrastructure.

Video thumbnail for Family.scss & successful open source
Speaker · CSS Paris #606

Family.scss & successful open source

How Family.scss grew, and lessons on shipping open-source CSS tools.

Video thumbnail for CSS Paris: blend modes, filters & video
Speaker · CSS Paris07

CSS Paris: blend modes, filters & video

A shared meetup recording including experiments with CSS blending, filters and video.

Video thumbnail for Paris Design Meetup #2
Organizer & host · 202408

Paris Design Meetup #2

The full event recording: design talks, community and opening remarks.

Video thumbnail for Paris Design Meetup #3
Organizer09

Paris Design Meetup #3

On May 28th, Paris Design Meetup returned for a special evening dedicated to the evolving relationship between AI and design. Hosted at Jitter’s colorful office in the heart of Le Marais, this edition brought together designers, product people, creative technologists, and AI-curious builders for talks, demos, portfolio showcases, job opportunities, food, drinks, and conversations around the future of creative workflows.

Three.js

Falling Sand

Matter · touch · fall

CodePen

MistralAI €3bn announcement

I build communities as well as interfaces.

Fig 0.8 · ClickTap the stage to start the talk

I organize Paris Design Meetup with Sébastien Navizet, bringing designers, developers and creative technologists together for talks, demos and conversations.

Our May 2026 edition at Jitter explored design workflows and AI, with Mathieu Boulet, Célia Lopez and Kim Köhler. My role: organizing the event and creating a space for these voices.

Explore Paris Design Meetup ↗
I like building things with the web that probably shouldn't be built with it ✷ and apparently a few designers and engineers enjoy the ride too. Here's what some of them had to say.
Fig 0.9 · 5 people, one table · hover a seattap a seat
I've met gifted people, but Luky is one of the few true CSS wizards I know. He's highly imaginative, and he's always down to use new features and cutting-edge APIs to show you that, yes, this is possible in CSS. His enthusiasm and energy are refreshing, and everyone secretly aspires to be as cool as he is.
Sarah DayanPrincipal Software Engineer
Luky is the dream partner in crime for a designer, always keen to implement the craziest designs. He is never afraid to explore new techniques, with a rare sense of detail and aesthetics. The best part is that in the end, you end up with an even cleaner look than the initial design!
Sebastien NavizetFreelance creative director
Working with Lucas has been one of the most flawless collaboration I've had as a designer. Constantly paying attention to details, crafting pixel-perfect experiences, he's not afraid to go above and beyond to be proud of the final result, which is a quality inherent to passionated workers I love working with.
Nicolas MeuzardProduct Designer
Among all the stars in the galaxy, the shiniest is called Luky. If you see it, make a wish for your next project and the sparkles of his creativity will bring life to your craziest dreams. Luky is the magic sauce.
Kevin GrangerHead of growth & development journey
I've had the chance to work with Lucas for many years, and all I can say is that every minute of it was a blast. Not only is he an incredible, funny and humble human being, but he also has a hacking mindset that helps him push his limits further and further. Lucas is truly a front-end expert with crazy CSS skills, and he always delivers pixel-perfect web experiences which are simply delightful to explore.
Ronan LevesqueEngineering Manager

Loading GitHub statistics… Explore my repositories

Got something that probably shouldn't be built with CSS? Let's build it anyway.

  1. 01FreelanceFront-end and creative development, from prototype to production.
  2. 02SpeakingConference talks and meetups on CSS, the web and DevRel.
  3. 03WorkshopsHands-on sessions for teams who want to go further with CSS.
</>CSSReactJSNextGLTSNode3DTWGitDX
Fig 1.2 · Press the keys your project needsTap the keys your project needs
Lucas Bonomi
Channels & elsewhere

Apart from the web I love nature, animal life and plants. If you want to build something weird or talk about DevRel craft, drop a line.

WebMCP compatibleThis site exposes its actions to agents via document.modelContext (WebMCP).WebMCPcompatible