Thomas Cullen @thomasauros Twitter profile

Last Seen Profiles

@abwamuhumudial1

@nagikitten

@RelationRx

@shmopboymoozy

@joseluisrubin

@cfcwonitall

@joeltoad

@Santanurc1958

@MNCHRMSBTC

@stw_pdg

@parnyna

@MaxenceMrchd

@darhyder001

@JennyCraig

@livebitez

@Mbin_souma

@abbas96ali

@radiolewisham

@ma_deathline

@photographerPi

@loverboytoy

@margielaaangel

@SUKA_EMAK_EMAK

@Federcongressi

@ErenShih

@Ferfecirbey

@unemniam_

@cukienaknikmati

@marykge

@_Sophie_aris

@DentalChelsea

@leviacontent

@SUKA_EMAK_EMAK

@kampcdmx

@mi_suzu2

@VU_SBE

Thomas Cullen

@thomasauros

1 year

Some people have been asking how the top section for this page was built. It was a ton of fun to make so here's a breakdown of how it was made… 🧵

Thomas Cullen

@thomasauros

1 year

We’ve launched file encryption @evervault ! - Effortlessly encrypt and share sensitive files ➡️

41

51

808

58

155

2K

Thomas Cullen

@thomasauros

1 year

Playing around with dynamic island on the web. The web should have nice things too.

18

47

1K

Thomas Cullen

@thomasauros

1 year

We’ve launched file encryption @evervault ! - Effortlessly encrypt and share sensitive files ➡️

41

51

808

Thomas Cullen

@thomasauros

2 years

Little preview of some of the controls for a new thing i'm working on. 👀

19

15

381

Thomas Cullen

@thomasauros

2 years

Fun experiment for a UI to configure keyboard shortcuts. ➡️

10

22

370

Thomas Cullen

@thomasauros

1 year

New "Credentials" use case page coming soon to @evervault website 👀.

9

14

331

Thomas Cullen

@thomasauros

11 months

👀

25

8

320

Thomas Cullen

@thomasauros

11 months

A preview of the task creation flow. Everything has keyboard shortcuts for fast input ⚡

17

8

264

Thomas Cullen

@thomasauros

1 year

Gave the @evervault blog a refresh. We put a lot of effort into our content so it deserves a nice home. ➡️

10

18

243

Thomas Cullen

@thomasauros

1 year

And thats it! You can add ?debug=1 to the URL to play around with some of the settings.

4

5

208

Thomas Cullen

@thomasauros

5 months

Pretty happy with how this turned out! See it live here and try it with your own images! ➡️

13

10

193

Thomas Cullen

@thomasauros

1 year

New "Credentials" use case is now live on the @evervault website. — Securely encrypt and use third-party API secrets & credentials ➡️

1

13

167

Thomas Cullen

@thomasauros

5 months

Image reveal shader 🤔

14

3

166

Thomas Cullen

@thomasauros

1 year

Some animated getting started cards I put together recently for the @evervault dashboard.

9

4

164

Thomas Cullen

@thomasauros

1 year

Encrypt or redact personally identifiable information anywhere in your stack with @evervault PII security! This one was a lot of fun to build 🙂 ➡️

6

12

126

Thomas Cullen

@thomasauros

2 months

Another one of my favourite heros from the latest work I've done on the @evervault website.

4

8

122

Thomas Cullen

@thomasauros

5 months

Relay getting started card for the @evervault dashboard.

4

5

108

Thomas Cullen

@thomasauros

2 years

Ok, I think that's it for this. Took a while to get around to finishing but i'm pretty happy with the results. Big thanks to @bruno_simon for his #threejsJourney course. It's by far the best online course I have ever done! See it in live:

4

6

95

Thomas Cullen

@thomasauros

1 year

New @evervault HIPAA Compliance use case page! - Instantly de-risk your business from HIPAA data breaches by ensuring all ePHI is fully encrypted, before reaching your infrastructure. ➡️

2

7

79

Thomas Cullen

@thomasauros

1 year

People seem to have enjoyed the last breakdown thread for the @evervault file encryption use case hero. So here we go again! How the Evervault HIPAA use case hero was built:

Thomas Cullen

@thomasauros

1 year

New @evervault HIPAA Compliance use case page! - Instantly de-risk your business from HIPAA data breaches by ensuring all ePHI is fully encrypted, before reaching your infrastructure. ➡️

2

7

79

1

6

72

Thomas Cullen

@thomasauros

1 year

@abeyang Thanks! I highly recommend by @bruno_simon to get started! Easily the best course I have done and well worth the money.

Three.js Journey — Learn WebGL with Three.js

The ultimate Three.js course whether you are a beginner or a more advanced developer

threejs-journey.com

0

5

67

Thomas Cullen

@thomasauros

1 year

The “Horizon” line in the centre is just a div with lots of radial gradients applied to it. I track the position of the cards and apply some more gradients to it when it is intersecting with a card. The secret to getting a nice glow effect here is to use “mix-blend-mode: screen”.

1

0

61

Thomas Cullen

@thomasauros

1 year

The background is made with Three.js and a points shader. Each point is given a random size and velocity and animates across the screen. A sin wave is added to each particle to add some vertical movement. Finally a small amount of colour is added as particles cross the centre.

1

0

61

Thomas Cullen

@thomasauros

2 years

What started out as an attempt to make a simple low poly monitor on a desk has turned into an attempt to make a fully interactive terminal. 🤔 #threejs #r3f #webGL

4

6

58

Thomas Cullen

@thomasauros

1 year

Both of these rows of decrypted/encrypted documents are then animated across the screen using framer-motion. The cards are repeated three times and the scroll offset loops around to make it appear as if the cards repeat infinitely in both directions.

2

0

47

Thomas Cullen

@thomasauros

1 year

The stream of documents is made by positioning two divs containing the decrypted and encrypted versions on top of each other. I then use the CSS “clip-path” property to add a mask to each of these so that the decrypted cards are on the left and the encrypted ones on the right.

1

0

47

Thomas Cullen

@thomasauros

1 year

Finally I add another Three.js particle scene on top of the horizon. The shader for this is similar to the background particles but instead all particles start at the very left and move right with a random delay. These are hidden initially and shown when interacting with a card.

1

0

43

Thomas Cullen

@thomasauros

2 years

Happy to say i've joined @evervault as a product designer. Super excited to be part of such an amazing the team!

2

1

43

Thomas Cullen

@thomasauros

1 year

Nearly there! Most of the UI is in place, focusing on functionality & fine tuning things.

2

1

40

Thomas Cullen

@thomasauros

2 years

Some more three.js fun. Light trails effect with torus knots and a customer shader. ➡️ #threejs #r3f #webGL

1

2

39

Thomas Cullen

@thomasauros

3 months

I've been working on lots of new website pieces for the launch of @evervault 's new payments security platform. Over the next few days i'm going to share my favourite parts! Starting with the new card data hero. ➡️

2

1

39

Thomas Cullen

@thomasauros

2 years

Using distance to center to mix between two colours gives a plasma like effect. Also using the audio to slightly change the size of the particles which adds a nice pulse to the music. #threejs #r3f #webGL

0

7

37

Thomas Cullen

@thomasauros

1 year

🕹️ PII Defender Prevent a data breach by encrypting any PII before it reaches your server. 🐣

1

2

35

Thomas Cullen

@thomasauros

3 months

I built a collection of 'mini machines' for some of the new pages on the @evervault website. Like this one for our Network Tokens page. ➡️

2

0

41

Thomas Cullen

@thomasauros

3 months

Northern lights in Galway providing some nice branding for @evervault

1

32

Thomas Cullen

@thomasauros

1 year

Putting together the components for this project has been so fun. Very excited to share the final thing.

5

0

29

Thomas Cullen

@thomasauros

2 years

List item selection inspired by how Things app does list selection on mobile. ➡️

2

0

27

Thomas Cullen

@thomasauros

1 year

Some @threejs magic from @NevFlynn on this one 😍

Nev Flynn

@NevFlynn

1 year

Introducing the @evervault Customers page ✨ Join the party. Encrypt the web.

28

34

479

1

0

26

Thomas Cullen

@thomasauros

11 months

@brian_lovin A little side project I've been working on 😊. Using it daily now to manage personal tasks so going to start sharing more / building in public. 😬

2

0

24

Thomas Cullen

@thomasauros

2 years

Sphere + particle shader + AudioContext API = audio visualizer 😍. (Doesn't work in safari/mobile yet) #threejs #r3f #webGL

2

3

17

Thomas Cullen

@thomasauros

1 year

Go on holidays... Try to avoid laptop... Day 2 of holidays... npx create-next-app ./website-new

1

17

Thomas Cullen

@thomasauros

1 year

@evervault Had lots of fun with the custom shader for the header section. You can pass "?debug=1" in the URL to play with the params!

0

2

15

Thomas Cullen

@thomasauros

2 years

Incredibly sad to say goodbye to this team. It's been amazing working with all of them and I will miss it immensely. Taking some time to think but i'll be looking for new oppotunities if anyone is looking for a full stack engineer!

POM

@pom_I_moq

2 years

After working on it almost every day for four and half years, we've made the incredibly difficult decision to shut down Advisable. I've gone into depth to try to explain this decision here: However, this is long so I'm sharing the tl;dr version below:

9

7

60

0

1

14

Thomas Cullen

@thomasauros

1 year

Noticing an increase in people using data attributes for customising styling on elements. I've always really liked this approach. Easier to read and avoids class string construction chaos 🤷‍♂️

2

0

14

Thomas Cullen

@thomasauros

2 years

Using @keyboardmaestro to assign keyboard shortcuts for the most common apps I use is one of my favourite productivity improvements.

2

1

13

Thomas Cullen

@thomasauros

2 years

First thing I shipped at Evervault 😊

Nev Flynn

@NevFlynn

2 years

✨Function Environment Variables✨ Evervault Functions allow users to process encrypted data. Like most serverless functions, they can consume environment variables. You can now import, copy and paste, or drag and drop environment variables directly into the Evervault dashboard.

2

0

7

0

13

Thomas Cullen

@thomasauros

2 years

New site who dis? Decided to start redoing my site as it's been a while since it's had any love. Removed blog for now while I work that out but had so much fun making this home page!

3

1

10

Thomas Cullen

@thomasauros

5 months

Another variation without cursor interaction. Quite like the way it resolves to the image.

1

0

10

Thomas Cullen

@thomasauros

2 years

Continuing down the rabbit hole of learning shaders and venturing into particle systems. It's amazing the things you can create with a sphere and some noise! #webgl #threejs #r3f

0

2

12

Thomas Cullen

@thomasauros

6 months

There are 3 native approaches to adding transparency to an existing color var in CSS.

1

11

Thomas Cullen

@thomasauros

3 months

You can use calc inside of color functions in CSS to dynamically change values. e.g make a background color lighter on hover.

1

2

12

Thomas Cullen

@thomasauros

1 year

@Valcho Yup! Layout animations make this pretty easy to build and keeps the code nice and clean :)

1

0

9

Thomas Cullen

@thomasauros

1 year

Excited about this. Lots of three js fun involved.

Evervault

@evervault

1 year

Something exciting coming to a (physical) mailbox near you soon 👀

0

1

42

0

9

Thomas Cullen

@thomasauros

2 years

Finally found a solution to my text overflow issue! Now I can get back to the 3D stuff, building out more terminal functionality and turning this into some kind of puzzle game :) #threejs #r3f #webGL

1

0

9

Thomas Cullen

@thomasauros

1 year

Last thing to do is rotate and move the whole thing into place! As with the file encryption page, you can add ?debug=1 to the url to play with some of the settings 🙂. ➡️

1

8

Thomas Cullen

@thomasauros

2 years

Finishing up the smoke and steam shaders and then I think i'm done with this one... Already excited to do another. #threejs #threejsJourney

1

0

7

Thomas Cullen

@thomasauros

2 years

More shader + perlin noise fun. Done with this one because it's starting to hurt my eyes... #webgl #threejs #r3f

0

1

7

Thomas Cullen

@thomasauros

1 year

RIP to all these stupid RIP tweets from the AI bros announcing the hypothetical death of products.

3

0

7

Thomas Cullen

@thomasauros

2 years

First pass this evening at living room scene in three.js. Lots more work to do but loving getting back into 3D work!

0

7

Thomas Cullen

@thomasauros

2 years

Each knot then has a custom shader that animates a colour along the mesh based on the uv x coordinate. Below is an example with the mesh remaining white instead of transparent.

2

0

6

Thomas Cullen

@thomasauros

11 months

Can we at least all agree that DHH gets the record for most amount of people upset by a single PR?

3

0

6

Thomas Cullen

@thomasauros

2 years

New @evervault docs are live! This was a huge effort from the whole team to prioritise developer experience.

Evervault

@evervault

2 years

We've redesigned our docs! ✨ We’ve built them to be as developer friendly as possible, allowing you to get up and running with Evervault Encryption in less than 5 minutes.

2

4

33

0

1

5

Thomas Cullen

@thomasauros

1 year

Some amazing details. 😍 Great work Resend team!

Zeno Rocha

@zenorocha

1 year

Another huge announcement. Resend is now available to everyone! To celebrate, we're releasing a new website: Here are some of my favorite details...

81

188

2K

0

5

Thomas Cullen

@thomasauros

2 years

At it's core this is just three torus knot meshes rotating in space. Torus knots are an awesome way to create what feels like random movement.

1

0

5

Thomas Cullen

@thomasauros

1 year

@rauchg Thanks Guillermo! 😊

0

3

Thomas Cullen

@thomasauros

2 years

Have some basic file system navigation stuff in place now. Might turn this into some kind of game 🤔

1

0

4

Thomas Cullen

@thomasauros

3 months

@stoumann @TGiorgadze1 Unfortunately I've taken the code for all of these down because I have started repurposing a lot of them for my own projects. I highly recommend checking out @bruno_simon course on threejs as a starting point & you will be able to make something like this & better in no time!

1

0

1

Thomas Cullen

@thomasauros

1 year

James is an inspiration when it comes to building products. The amount of relentless passion and effort gone into @ConjureSo is insane. Check it out and give it an upvote!

James Whelton

@Whelton

1 year

Somebody else just hunted @ConjureSo on @ProductHunt before I could 😱 Do I roll with it and use this opportunity to beat my perfectionism? PH docs say I can relaunch in the future again.

5

7

33

1

0

5

Thomas Cullen

@thomasauros

5 months

@grinich Awesome page. Very refreshing

0

3

Thomas Cullen

@thomasauros

2 years

Have decided to make Kidogo icons open source instead.

0

5

Thomas Cullen

@thomasauros

2 months

Walnut and maple wine box I made entirely with hand tools for my wedding in two weeks 😳

0

7

Thomas Cullen

@thomasauros

11 months

@mackenziechild Thanks! Not yet, pretty early in the development process but starting to build in public.

2

0

5

Thomas Cullen

@thomasauros

2 years

Added a few more icons to the pack.

0

4

Thomas Cullen

@thomasauros

2 years

Have fixed most of the baking issues. Now to work on lighting and adding some little interactive details :)

0

4

Thomas Cullen

@thomasauros

2 years

My sister is a teacher and brought in dice from home to teach her students about probability... except she accidentally brought in some weighted dice I had as a kid and they could only roll 6s 🤣🤣

0

4

Thomas Cullen

@thomasauros

2 years

@evervault Where's that edit button 👀

0

3

Thomas Cullen

@thomasauros

1 year

@peduarte Thanks man! Not going to lie, Raycast AI helped me out a good bit with the shaders 😄

1

0

4

Thomas Cullen

@thomasauros

1 year

The basic spiral structure for the DNA is made of two tube geometries. I use a THREE.Curve to create the spiralled curve and then pass this to the tube geometries. I then duplicate this tube and rotate it 180deg to get the two spirals.

1

0

4

Thomas Cullen

@thomasauros

2 years

@NevFlynn @evervault Awesome!

0

4

Thomas Cullen

@thomasauros

1 year

@constantout @evervault About two weeks of iterating on it. Will share a breakdown of how it all works tomorrow!

1

0

4

Thomas Cullen

@thomasauros

2 years

Apple: "We've made it easier than ever to accidentally share nudes with your family". #WWDC22

0

1

4

Thomas Cullen

@thomasauros

2 years

My teammate @guandjoy had moved from Ukraine to Galway before the war started & is now really struggling to find a place to live. They are an amazing couple, happy to pay usual rent rates, and would be incredible tenants. Please share if you know someone who could help.

Yurko Turskiy

@yurko_turskiy

2 years

Hi there, we’re Yurko & Kate, a Ukrainian couple who need a home in Galway. I’m a Web Developer & Designer who moved 1 month ago to work for an Irish startup & Kate’s a Makeup Artist/Chemistry PhD student who joined me to escape the war. Any options/shares are much appreciated!

93

3K

5K

0

2

4

Thomas Cullen

@thomasauros

11 months

@brian_lovin @_ryannystrom Thanks! Yeah I would love to eventually include some level of daily notes / journalling. Have an endless list of ideas to get through first. You know the way 😅

1

0

3

Thomas Cullen

@thomasauros

2 years

Rusts ownership idea is wild.

0

3

Thomas Cullen

@thomasauros

9 months

@DavidNewell95 @bkenny @tobi @rubyonrails @MiniCorpHQ Matching you with Minicorp was one of the few things the Shake codebase got right. 🤣. Haven't watched the doc yet but will put it on the list.

1

0

2

Thomas Cullen

@thomasauros

1 year

@DavidNewell95 @evervault Great idea! DM me your card details and I'll get one sorted for you 👀🤣

1

0

3

Thomas Cullen

@thomasauros

11 months

@pagebakers @radix_ui primitives for accessibility of things like dialogs, menus, etc. @framer motion for animations. Styling is all custom with CSS modules.

1

0

3

Thomas Cullen

@thomasauros

1 year

@peteromallet That’s awesome! Great to see more companies doing this. As sad as it was for Advisable to come to an end, I will always be so grateful for how you handled it! ❤️

0

3

Thomas Cullen

@thomasauros

11 months

@FloWritesCode Built with react and using mobx for data state

0

3

Thomas Cullen

@thomasauros

2 years

Just got bit by this insane JS quirk.. Seriously!?!

1

0

3

Thomas Cullen

@thomasauros

2 years

New keycaps, who dis?

1

0

3

Thomas Cullen

@thomasauros

2 years

Great case study from @MerciMichel about building Coastal World. Incredible work 👏

Coastal World by Merci-Michel wins Site of the Month August 2022

Round of applause for Merci-Michel for winning Site of the Month August 2022 for Coastal World, if you voted - we thank you,...

www.awwwards.com

0

3

Thomas Cullen

@thomasauros

2 years

Insane deal. 3D in web design opens up a whole new world of possibilities and Bruno’s course is the best and fastest way to learn It.

Bruno Simon

@bruno_simon

2 years

Black Friday early access! 🛍️ Get a 50% discount for the WHOLE Three.js Journey course with the code 2022BLACKFRIDAY 🎁 👉 70 hours of video to learn Three.js and much more at $47.5 #threejsJourney #threejs #r3f #webGL

19

54

297

2

0

3

Thomas Cullen

@thomasauros

1 year

Easiest money I've ever spent.

Raycast

@raycastapp

1 year

Introducing Raycast Pro - Unlock a new level of productivity! ✨ Raycast AI ☁️ Cloud Sync 🎨 Custom Themes 📋 Unlimited Clipboard History 🧑‍💻 Pro APIs 🔜 And more to come Upvote on @ProductHunt 👉 Read announcement 👉

93

746

0

2

Thomas Cullen

@thomasauros

1 year

Insanely good 👏

rauno

@raunofreiberg

1 year

Why do some interactions just feel great? To find out, I wrote a 3000-word essay on deconstructing the craft of interaction design through metaphors and examples.

96

665

3K

0

3

Thomas Cullen

@thomasauros

2 years

Don’t care how you think adults should behave, call of duty release day will always feel like Christmas morning to me.

1

0

2

Thomas Cullen

@thomasauros

2 years

Using GPT-3 to generate D&D games could actually work...

0

2

Thomas Cullen

@thomasauros

1 year

I then add a meshPhysicalMaterial to both of the tubes to add a transparent glass like material. Two point lights with high intensity and different colours are placed behind the tubes in different positions to add backlighting which gives a nice glow like effect to the edges.

1

0

2

Thomas Cullen

@thomasauros

1 year

@liammckay Thanks! Appreciate it 🙂

0

2

Thomas Cullen

@thomasauros

11 months

@iamcurtisr @brian_lovin @_ryannystrom Will hopefully open it up for alpha testing over the next few months. 🤞

0

2