emil @emilwidlund Twitter profile

Pinned Tweet

emil

6 months

Are you curious on the Design Engineer role? Let me tell my story, on how I made my way from a junior designer to a UX Engineer at @EA . It involves a love letter to @framer , using React in @Battlefield inside of the @FrostbiteEngine & a love for Design Tokens. Link below 👇

13

7

112

Last Seen Profiles

@avleyy_

@Luca_LoveSeb

@tetowb

@Phosphorus_VA

@jandakembangstw

@RadioCentroAv

@gatorrs

@ffu16431

@photog_tipps

@firstmeethim

@g33konaut

@belpetite94

@Michael18311953

@kkpapua1

@SIU_WBasketball

@adrian_olram

@umitsjami

@yogibearcamera

@stwmaniax

@therlnaee

@vellaein

@xCandyLover123x

@bokeplokalmalam

@MadhaviArora7

@syIvaniandiary

@xpxpu

@Pacystar_cr

@mrnonel

@_1jamaan

@montrell_24

@tomatodamenako

@mirrorsonii

@stw_pdg

@bokeplokalmalam

@stw_pdg

emil

@emilwidlund

5 years

When you’re demoing your prototype for the whole Design Team.

25

697

4K

emil

@emilwidlund

3 years

Did you know that @simonstalenhag made No Man’s Sky’s cover art? It’s clear once you recognize the beautiful perspective he often uses in his work.

14

373

3K

emil

@emilwidlund

4 years

Did Twitter just remove the haptic feedback from the like-button?!

56

88

2K

emil

@emilwidlund

1 year

Today I'm introducing Nodl! 🥳 A brand new, open sourced framework for visual node graphs. It has a core library & a React-library as of now, runs on MobX and leverages the power of RxJS & Zod for computational magic. Feel free to contribute!

31

143

2K

emil

@emilwidlund

1 year

Hot take: Next.js is the most frustrating, opinionated mess I've ever had to deal with. Ugh.

200

88

2K

emil

@emilwidlund

2 years

I'm super excited to introduce Alma - a digital playground for generative graphics 🥳 I've dreamt of creating a visual node editor for visual experiences on the web for quite some time. I think I'm on the right track. Feel free to take it for a spin!

56

163

1K

emil

@emilwidlund

6 years

Fun fact: Many of the menus and screens in Battlefield 1 were built using React which is rendered in-game using the Frostbite Game Engine. This in turn means that most UI-tweaks doesn’t need a Game Patch but instead just a new js-bundle to be fetched over http.

30

298

1K

emil

@emilwidlund

1 year

I'm soooo excited to announce that my passion project @usealma now is open source! 🥳 An experimental playground for generative graphics. Compose nodes into WebGL experiences - all through an intuitive no-code interface.

19

132

1K

emil

@emilwidlund

5 years

Found some very early prototypes of the home screen for @Battlefield V made with @Framer . Tried out some 3D perspective shenanigans that were later cut. One of the more interesting thing I’ve been working on. They were natively navigatable with Gamepads as well.

40

80

851

emil

@emilwidlund

1 year

I'm particularly happy with the interface I designed for Alma.

emil

@emilwidlund

1 year

I'm soooo excited to announce that my passion project @usealma now is open source! 🥳 An experimental playground for generative graphics. Compose nodes into WebGL experiences - all through an intuitive no-code interface.

19

132

1K

29

30

714

emil

@emilwidlund

5 years

Imagine being a designer on the Twitter Design team and having to deal with “Design Twitter”.

7

29

705

emil

@emilwidlund

2 years

Can't stop working on details in the micro-interactions. Love it!

17

27

642

emil

@emilwidlund

7 months

Introducing Harmony – a new kind of color picker. Make anything beautiful with color harmonies at your fingertips. An in-depth article on this will drop this weekend over at . Make sure to subscribe.

16

45

594

emil

@emilwidlund

3 years

I'm quite excited to share that I've managed to get an extremely early version of "Neon" deployed 🥳🥳🥳 What is Neon, and how does it work? A thread 🧵

22

71

581

emil

@emilwidlund

1 year

How the hell did we layout in CSS before Flexbox?

279

17

572

emil

@emilwidlund

1 year

Had some fun writing an ASCIIPass for THREE.js which is entirely WebGL-driven compared to THREE's official ASCIIEffect which uses the Canvas API.

15

20

465

emil

@emilwidlund

1 year

ASCII Effect on the GPU for @threejs is now open source here: . Going to add a PR to the "postprocessing" library tomorrow. Have fun!

11

50

440

emil

@emilwidlund

5 years

No Gamepad-support in @figmadesign ? Hold my beer:

23

44

408

emil

@emilwidlund

7 months

✨ Introducing Bitspace – A new kind of playground for creative ideas. It's time for a new era in creative tooling. A paradigm which is shaped around exploration, prototyping & creative freedom. Join me on my journey - it's open source.

18

34

406

emil

@emilwidlund

1 year

Want to build a node-based editor on top of 3D-environments like Three.js? It's all possible with Nodl. New major version with node-previews out soon.

7

36

382

emil

@emilwidlund

1 year

Was bored. Made a few concepts on Tinycorp @__tinygrad__ ✨

9

5

319

emil

@emilwidlund

2 months

Did some explorations in Midjourney ✨

19

12

318

emil

@emilwidlund

1 year

The fragment editor feels so nice. Can't wait to give you all access.

7

6

276

emil

@emilwidlund

1 year

Origami in Figma? 🎉 Made this simple plugin for Figma yesterday, to showcase what you can build with the Nodl-framework. I can see sooo many usecases for this.

12

21

276

emil

@emilwidlund

2 years

Alright - let's make (yet another) node-based tool which gives you the power to create procedural, generative art. The node-engine is in place. Now I'm focusing on the user experience. I have a type-system in place which communicates which connections that can be made.

9

11

275

emil

@emilwidlund

5 years

”3D Terrain” is now available in the Framer X Store. Pass Longitude & Latitude coordinates and you’ll instantly get a nice 3D mesh of the area with a satellite texture projected on top. Controls to tweak vertical & horizontal scaling is available. Now time for coffee.

10

25

270

emil

@emilwidlund

1 year

Sine waves are like magic 😊

8

25

251

emil

@emilwidlund

5 years

Fall is here 🍂

5

7

240

emil

@emilwidlund

2 years

Multi-select ✅ These small UI details makes the editor a breeze to work with.

6

4

243

emil

@emilwidlund

7 months

👀✨😊

6

15

239

emil

@emilwidlund

5 years

Prototyping Gamepad UI’s with @framer since their release of Framer Motion is fantastic. Here’s an example of forward/backwards page transitions using React Router in combination with Framer Motion’s Animate Presence feature.

6

25

222

emil

@emilwidlund

1 year

Still have no clue what Alma is & how it works? I compiled a quick 30 seconds demo which showcases the gist of it. See you at React Summit 2023 in Amsterdam on Friday! :)

16

14

224

emil

@emilwidlund

2 years

I'm now able to parse & build a node from GLSL code. Arguments, function body & return type are automatically inferred from the given GLSL input! Users may now write their own functions and instantly generate a node that can be composed with other logic. Just like magic 🪄

10

12

222

emil

@emilwidlund

1 year

Finally got to an important milestone with Alma tonight. The node shader graph is integrated to the new Alma rendering API, where you can have normal GLSL layers and visual node shader graph layers mixed.

9

13

222

emil

@emilwidlund

3 months

Tonight's coding adventure to implement a visual representation of the Oscillator Node. Lots of trigonometry magic later & there's an oscillating dot with a matching trail. The trail is nothing more fancy than an animated SVG Path :-) @newfrgmnt

5

11

222

emil

@emilwidlund

2 years

The tooltip system is in place!

5

14

213

emil

@emilwidlund

3 months

some kind of design machinery @newfrgmnt

7

16

207

emil

@emilwidlund

5 years

This is what we in Sweden call “personal space”.

12

22

200

emil

@emilwidlund

4 years

I took some time this evening to implement support for custom GLSL shaders in my @threejs_org node sandbox. Write your own custom vertex & fragment shader, and the engine will automatically build a node with input ports that correlates with the declared uniforms.

9

22

204

emil

@emilwidlund

7 years

I have 2 Beta Codes to Star Wars Battlefront 2. One for PS4 and one for XBOX One. Make sure to retweet, and I’ll draw a happy winner.

44

415

178

emil

@emilwidlund

1 month

a hill i’m willing to die on stop putting theme toggles in the navbar as you’d expect users to constantly switch between light & dark mode put it in a settings page if you so desperately need to deviate from system defaults

18

9

198

emil

@emilwidlund

1 year

The new Alma experience will feature user profiles to showcase your shader projects.

8

9

193

emil

@emilwidlund

7 months

✨ Added a simple timer node which emits sequential numbers at a given rate. Perfect way to drive all kinds of computation - like complementary colors!

7

12

190

emil

@emilwidlund

1 year

I should never had started a new project with the "app" directory feature. It's a nightmare.

16

6

182

emil

@emilwidlund

1 year

Added Blending mode-support to the Alma layer renderer last night. Took a while to figure out. But now works like a charm.

4

6

182

emil

@emilwidlund

6 years

Super-excited to show you all the new UI and menus in @Battlefield V. Quite a different experience compared to the last game, and it has a particular new immersive feature that adds so much to the user experience. You'll understand what I mean. See you in the Open Beta!

16

17

175

emil

@emilwidlund

3 years

My design career at @EA started 7 years ago & tomorrow it’ll come to an end. I want to express my sincere gratitude to my past managers @mhesslow , Kurt & Jerome for mentoring me & making me a better designer. Tomorrow marks my first official day as a software engineer at @EA .

24

0

176

emil

@emilwidlund

3 years

Got the opportunity to shoot @Audi ’s new Q4 e-tron.

14

10

165

emil

@emilwidlund

6 months

A few years ago, I made the jump from a Design role over to Engineering as a "UX Engineer" at @EA . Tomorrow, I'm publishing an article about this journey, and how you can supercharge your design role with creative engineering abilities. Subscribe at

9

8

169

emil

@emilwidlund

4 years

My small vacation project (a @threejs_org node editor) does now have a simple timeline, which can be used to drive values in a more controlled environment. The example below derives timeline data via a Timeline node; to drive position & rotation on a Mesh.

7

168

emil

@emilwidlund

6 years

I’m super excited to announce that I’m transitioning into a new role at EA in January. I’ve had a blast at DICE working on Battlefield for the last 4,5 years. But I’m now moving on to new, groundbreaking EA-initiatives that will be built for millions of players. 🔥🔥🔥

13

1

165

emil

@emilwidlund

4 years

I still can’t believe that I was hired by @EA as a designer 1 year after finishing high school. And now - 6 years later; I’m a self-taught engineer at @EA . I never went to college. There were other ways to learn. Stay curious & ask questions. That will get you far.

6

10

160

emil

@emilwidlund

7 months

✨ Quick Maths!

6

9

151

emil

@emilwidlund

5 years

Wanted to challenge myself these last 2 weekends, by building a 3D composer/editor with a "node editor" engine, just for fun. Done with React, MobX & THREE. This example shows milliseconds derived from the timeline clock, and applied to a simple mesh in the "node editor".

9

14

148

emil

@emilwidlund

1 year

Some early explorations.

emil

@emilwidlund

1 year

Played with some ideas for a new landing page last night. If you break the connection between these two nodes on the landing page, it would switch the page into dark mode - how about that? 🤓

1

3

43

6

5

145

emil

@emilwidlund

7 months

A Console Node for debugging ✨

3

8

145

emil

@emilwidlund

4 years

Improving my @threejs_org node graph with an inspector panel & control types for adjusting things like strings, numbers & colors. Also added a "window"-feature which renders the selected node's internal object in a simplified "Inspector-only" scene, preloaded with OrbitControls.

5

11

144

emil

@emilwidlund

4 years

I’m building a graph editor which integrates with @threejs_org on my vacation as a personal side project. Below is a demo of a “Glitch Effect Pass” node that applies a glitch effect to the THREE.js rendering context.

3

8

133

emil

@emilwidlund

1 year

I’ve made the decision to leave @EA . After 9 years. EA was my first employer. Never would I think that it would become my home for 9 incredible years. That’s a long time in this industry, but I loved every second of it.

15

2

132

emil

@emilwidlund

1 year

Draggable layer hierarchy! ✨

emil

@emilwidlund

1 year

Springy toggles 🥲

2

0

31

3

7

123

emil

@emilwidlund

7 months

Next article coming up on - A deepdive into the code behind which I launched a year ago. I'll be covering WebGL, shader basics, GLSL AST & the design decisions behind the node-based UI. Anything in particular you'd like to know?

4

9

123

emil

@emilwidlund

5 years

Enter longitude/latitude coordinates and a zoom level and 💥 - You have a super-detailed 3D mesh of the area with a projected satellite texture on top. And yes - you can adjust lighting angle however you wish. Here’s Mount Everest.

5

10

124

emil

@emilwidlund

4 months

Why a Design Engineer career is an investment for your future

In April 2014, I received an email. Cool things in your portfolioHey Emil, I've had a look at your portfolio, and I like what I'm seeing! I'm working at an EA Studio on titles like Battlefield, Star...

polar.sh

6

120

emil

@emilwidlund

1 year

v1.0.0 of Nodl is now out! nodeWindowResolver can now be used on the Circuit-component to return custom React-components to be used as Node-previews. Three.js-example can be found here:

emil

@emilwidlund

1 year

Want to build a node-based editor on top of 3D-environments like Three.js? It's all possible with Nodl. New major version with node-previews out soon.

7

36

382

5

13

118

emil

@emilwidlund

2 years

Context Menu ✅ The deliverables for an Alpha-release are almost done!

7

1

118

emil

@emilwidlund

1 year

Alma has been nominated to “Fun Project of the Year” by the community for the React Open Source Awards 2023. Means a lot ❤️

3

9

106

emil

@emilwidlund

6 years

Here is a more detailed look at it in action! by @truppo ! 👌🏻

React in Battlefield 1 by Markus Thurlin (@truppo) at @ReactEurope...

Get next edition's tickets info here: https://goo.gl/yfHbBG

www.youtube.com

2

10

112

emil

@emilwidlund

2 years

👀

5

2

109

emil

@emilwidlund

6 years

Aaaand we’re married! 🤵🏼👰🏼

26

1

109

emil

@emilwidlund

1 year

Learning how to code was the best decision I made as a designer.

8

5

109

emil

@emilwidlund

3 years

Rivers are full of textures.

2

107

emil

@emilwidlund

1 year

Here's a floating tab bar with active, hover & tooltip states that I'm playing around with.

emil

@emilwidlund

1 year

Working on some UI explorations for this summer’s side project.

4

0

48

8

4

105

emil

@emilwidlund

6 years

Got access to @Framer X a few hours ago and the new SceneManager for Form is in place already. Here is just a fun little demo of a scene that is drawn transparently, directly on Framer’s canvas.

3

11

103

emil

@emilwidlund

1 year

The first version of Alma was actually a graph on top of ⁦ @threejs ⁩ with an integrated Timeline & physics support. Video is a demo from 2020.

1

5

105

emil

@emilwidlund

7 months

I might be building something 👀

emil

@emilwidlund

7 months

👀✨😊

6

15

239

6

3

105

emil

@emilwidlund

5 years

Framer Joystick is one step closer a release for @Framer X. Entirely built on React Hooks and MobX. Supports Gamepads out of the box.

6

11

101

emil

@emilwidlund

6 months

✨ The Bitspace Alpha will include @threejs support! Compose complex graphs & connect it with any kind of 3D primitive. Support the project by subscribing to the Supporter-tier on – then you're first in line when the Alpha drops.

3

10

103

emil

@emilwidlund

7 months

Some reveal animation tinkering for ✨

1

101

emil

@emilwidlund

9 months

I quit my position at @EA after 9 years, just two months ago. The amount of creative freedom I’ve experienced the last few months over at @polar_sh has been incredible. Moving from a corporate environment to a startup is something I advice all creatives to do at least once.

5

0

91

emil

@emilwidlund

3 years

Did some more WebGL hacking this past weekend. State serialization is now in place. Along with a Time-component. Everything running on the GPU thanks to @threejs_org NodeMaterial. Below is some oscillating coloring driven by time.

3

89

emil

@emilwidlund

7 months

Designers apparently don’t want to code. Fine. Then I’ll just build a composable & programmable design environment for you then.

emil

@emilwidlund

7 months

✨ Quick Maths!

6

9

151

4

5

90

emil

@emilwidlund

6 years

Animation Mixers & Morph Targets are now working in @Framer X.

4

3

87

emil

@emilwidlund

6 years

Got an interesting idea the other day. Visual Scripting in @Framer X. This is not a "design" in @Framer X. It is a fully working Visual Scripting-framework built with the look, feel and setting of @Framer X. Perfect for non-programmers who needs logic in their designs.

9

11

84

emil

@emilwidlund

2 years

Adding support for raw GLSL-projects to @usealma . No need to use the visual node editor if you don't want to! 🥳

1

2

84

emil

@emilwidlund

1 year

Nodl will soon have a proper documentation portal with plenty of examples. This one in particular is super simple to setup.

2

3

81

emil

@emilwidlund

2 months

Image Synthesizing & Vision with Bitspace. A node-workflow on top of AI models is the perfect match ✨ @newfrgmnt

3

9

84

emil

@emilwidlund

7 years

The CTE *might* have something special in store for you Battlefield players soon. Stay tuned.

11

12

79

emil

@emilwidlund

1 year

Played around this past weekend with a curtain transition in combination with my @threejs ASCII effect.

emil

@emilwidlund

1 year

ASCII Effect on the GPU for @threejs is now open source here: . Going to add a PR to the "postprocessing" library tomorrow. Have fun!

11

50

440

2

7

81

emil

@emilwidlund

4 years

What @realGeorgeHotz has done with @comma_ai is truly remarkable. The Android of self-driving cars. They’re winning.

2

7

80

emil

@emilwidlund

2 years

I heard you all! I'm working on an open sourced version of @usealma 's node-graph engine with an accompanying React-library. But this time using RxJS as the backbone of observable computations, and Zod to validate value transmissions. Keep your eyes open!

emil

@emilwidlund

2 years

I'm super excited to introduce Alma - a digital playground for generative graphics 🥳 I've dreamt of creating a visual node editor for visual experiences on the web for quite some time. I think I'm on the right track. Feel free to take it for a spin!

56

163

1K

3

2

75

emil

@emilwidlund

6 years

Today I celebrate 4 years at @EA . It’s been an amazing journey so far, and a privilege to work with such talented people at @EA_DICE . Let’s aim for another 4 years! 👊🏻

4

2

74

emil

@emilwidlund

7 months

✨ My technical post on is now available to everyone! A deep dive into WebGL, Shader ASTs, MobX observables & Node UIs. The architecture behind Alma – An experimental playground for generative graphics.

4

13

73

emil

@emilwidlund

6 years

Experimenting with an isolated component approach to make Form for @Framer X more modular. The mesh being rendered is a renderless React component that communicates with the dependent Scene comp. Added options to change positions, rotations and materials. Tomorrow: Models.

5

8

73

emil

@emilwidlund

6 years

Love this gem in the office.

3

6

70

emil

@emilwidlund

5 years

5 years at @EA today! 💥🎉🎊🎈

8

0

70

emil

@emilwidlund

5 years

I turn 25 today. It feels like I’m halfway through life already, which of course isn’t true. I need some advice on how to tackle these last 5 years up to 30. Both personally and professionally. What are some great advice that helped you through your 20’s?

25

1

68

emil

@emilwidlund

5 years

No, you don’t “need” the new Apple display nor the new iMac. Stop consuming tech like you’re poppin’ pain killers.

10

8

65

emil

@emilwidlund

5 years

And we of course played around with some 3D customization prototypes to get a feeling for the camera transitions. 100% done with @Framer . Fun times.

1

4

69

emil

@emilwidlund

1 year

Alma now has an example for "Custom GLSL" which is based on kishimisu's lovely shader. With Alma's port abstractions; function parameters can easily be tweaked and played around with.

kishimisu

@kishimisu

1 year

I've shortened my tutorial to fit in 227 chars! #つぶやきGLSL for (O *= i; i++ < 4.; O += pow(.04 / abs(sin(8. * ( length( u = fract(u * 1.5) - .5 ) / exp(l)) + iTime)), 1.2) * (1. + cos(6. * (l + (i + iTime)*.4 + vec4(.26,.4,.56,0))))); Original video:

9

150

894

1

3

68