RMv0YJlLOBe7cY7HgZ3Jox34R0Wrk7jLv3DZyBETA7I=

ZC8pa382rux3/Ya5JYmbaiFDJJqVQfa/ZkKRoDwNIOg=

zRYikcIlbF3Un7C26+4VGO/t8jKwNjjuAdQWLlZECTQ=

/zPeDB00QSmJg02UNPvvY6N+w7bL9XbOTmOZn0UHdA0=

9DmxyyZ8FEsc5DSKm/8DpcDu2e/GCLlCF0UJQCEBuSw=

Pesmw2FSIduSR93sJEVAEAHyJZ4MQP9Pbn1gPgXxcXw=

l+2HpTI8qsEqSoxz6Y8y+po4C4+PakSbBdZ2Wp0L/Zk=

p8RKstqTUsFv0yM8P1EiWUksDkzfBxAw5OAvX/lo29w=

xdTyVT3ZuBSNWCl2NPxJ8eZ0ifhUzatwezSwUElWFy0=

Saw a great tweet sharing an "x-ray" reveal style interaction from the Linear.app site and decided to attempt to remake it in Webflow.

✅ Native Interaction
✅ 2 quick lines of custom code (one for the stroked text, one for the CSS mask)

Feel free to clone and play around with it!

Original tweet - https://twitter.com/hybrid_alex/status/1576917187872317440

Actual site (scroll to bottom) - https://linear.app/integrations

Linear "X-Ray Reveal" Interaction

Day 3 submission for CloneComp

Had too much fun with day 2, so I had to go back to finish it off.  You now get to choose your final destination based on your vote criteria collected earlier in the site.

Thanks to all of the coordinators and sponsors for putting this awesome competition together!

day3-chrisabra

I created a simple support widget for a client's site that didn't end up getting used, so might as well let others use it!

This version is powered by Jetboost (https://www.jetboost.io/) but I'll re-create it using the Finsweet CMS Library soon.  I tried to keep the styling very minimal so that you can update fairly easily for use in your sites.

Customer Support Widget (Powered by Jetboost)

Welcome to Finsweet Island.  Your first task is to find some food and get to camp, for tomorrow will bring new challenges.

Day 1 | Chris Abra

Description

More by Chris Abra