Kristian Wagner @k_wagner Twitter profile

Pinned Tweet

Kristian Wagner

1 month

mood lighting [2] the lamp and computer have made their way onto the web, made with good ol' svgs and some framer motion this is a little teaser from an upcoming release - soon to land on an operating system near you stay tuned 🩶

0

1

25

Last Seen Profiles

@iku_1129Q

@BandarStw

@ddot_5959

@Octopus_Hero

@lou3ee

@onza_bubbles

@alvaro4535

@coppolapaolo

@KevinKnerr3799

@michaelbirnbaum

@the_goddess12_

@billyshortall

@lunaquete

@nankingamary2

@PitschScar33610

@chaves817

@kanekikv31

@1oveletter_

@allpowerbooks

@libreriagradua2

@ukennethseeme

@pororox_

@RugdollzNFT

@sm_024_

@Humanit_Health

@BabyyVi

@elyas_zaheer

@OLDDDDD

@UNDP_Solomons

@Andy_Wheatley

@MH_Canta

@OrHeller

@jed2_3adjayi

@Badassgadget2

@AngeloLuciani

@gao___1126

Kristian Wagner

@k_wagner

4 months

mood lighting dark modes are becoming an expected feature for many, but what if they actually brought something to the table in terms of elevating the user's experience? very excited to slowly bring the letters app to life, one exploration at a time.

12

26

464

Kristian Wagner

@k_wagner

4 months

happy accidents. love stumbling into crazy (unintended) animations along the way.

10

20

446

Kristian Wagner

@k_wagner

4 months

dynamic spaces 🔳 exploring alternative navigation patterns with perspective. love this sense of depth, and creating "rooms" to step in and out of. will most likely feature in the letters project 🩶

12

28

432

Kristian Wagner

@k_wagner

4 months

exploring bottom sheets. made with a transition library I'm working on that focuses on: - simplifying shared element transitions - forwards AND backwards gesture compatability - only native animations - full access to elements on entering AND exiting screens happy friday 🩶

6

15

356

Kristian Wagner

@k_wagner

4 months

exploring shared element transitions 🪄 beginning to get very excited about this project - starting to feel easy to compose complex screen transitions. see great potential for this library to make aspiring design engineers comfortable with coding their ideas. cont. ⬇️

7

21

298

Kristian Wagner

@k_wagner

2 months

wiggly keyboard v1 the most recent development from a project with @samdape implementing a fully custom keyboard and text rendering interface to bring the wiggly ways of our world to life this is definitely a challenge (handling word wrapping, selection, multiple key taps

6

12

181

Kristian Wagner

@k_wagner

4 months

gestures 🩶 final proof of concept with my take on a crowd favourite: the music player animation made this to test out forwards gesture compatibility (going TO a screen) - see second video officially ready to start implementing this in production apps, stay tuned

4

164

Kristian Wagner

@k_wagner

4 months

UIDoorController one day, I will find a legitimate use for a door navigation. what would you put behind door number 1?

15

10

151

Kristian Wagner

@k_wagner

3 months

another homerun by Sam, perfectly balancing simple silliness with gripping artistry. for me, it falls in the category of “I don’t know exactly why this is great, but I cant stop smiling” officially in the queue of things that must become real

sam

@samdape

3 months

just run

298

690

14K

2

5

140

Kristian Wagner

@k_wagner

4 months

lamp picker a table lamp can both represent your personal aesthetic and define the mood of an entire space What else do you want to customise at your desk?

7

8

140

Kristian Wagner

@k_wagner

4 months

day 2 of folders. its coming alive. second photo for the nerds 🩶

7

6

139

Kristian Wagner

@k_wagner

3 months

computer exploring a childhood memory in an interactive space, equipped with pinch, pan and click, tactile keys, and flashing vintage screen. built with react native skia and a lot of creative gesture handling. really want to use this for a welcome screen one day, what kind

3

2

69

Kristian Wagner

@k_wagner

3 months

vinyl exploring perspective and movement, squeezing 3D motion into a 2D space while everyone is focused on all the newest tech at WWDC I'm celebrating a timeless medium - the record player

4

6

70

Kristian Wagner

@k_wagner

3 months

behind the scenes I always prefer demoing apps on device instead of using the simulator - much smoother, more tactile to get touches and drags to show up on recordings, I have a controller nearby that is set up as a pointer device

5

4

56

Kristian Wagner

@k_wagner

4 months

hold and pan for shiny mode.

0

38

Kristian Wagner

@k_wagner

3 months

I have a record player in my office. its my pomodoro timer. play side A, 20-25 minutes of focused work when side A is done, take 5 minutes to turn over record. play side B, 20-25 minutes of focused work rinse. repeat. 🩶

0

1

22

Kristian Wagner

@k_wagner

4 months

build a stamp. so many fun things going on in this little stamp editor, lots more to come.

1

0

24

Kristian Wagner

@k_wagner

4 months

heres a simplified example of how the circle transition works. The magic is in the useTransitionStyle hook, that wraps reanimated's useAnimatedStyle so you can apply animations to the following events - focus (mounting) - exit (unmounting) - blur (a screen is stacked on top)

1

0

19

Kristian Wagner

@k_wagner

2 months

“Design engineer”

0

19

Kristian Wagner

@k_wagner

4 months

excited to soon start building this section, a place to store your letters, polaroids and much more.

sam

@samdape

4 months

contacts - slowly coming together, give @k_wagner a follow to see some working prototypes & other details of letters

34

120

2K

1

0

15

Kristian Wagner

@k_wagner

4 months

polaroids from a friend. tap to open and swipe through

0

15

Kristian Wagner

@k_wagner

4 months

App navigation and movement between screens is a key part of world building. Do you want your users to experience boundaries or floating spaces? Edges or seamless transitions? I think it deserves much more focus.

1

0

13

Kristian Wagner

@k_wagner

3 months

"every onboarding flow should feel like you are picking a starter from professor oak" - my goal in perpetuity

0

2

12

Kristian Wagner

@k_wagner

4 months

letter opening now with polaroids

3

2

11

Kristian Wagner

@k_wagner

4 months

border: 1px red is the only debugger i need.

0

10

Kristian Wagner

@k_wagner

4 months

one thing led to the next, and here we are

Kristian Wagner

@k_wagner

4 months

UIDoorController one day, I will find a legitimate use for a door navigation. what would you put behind door number 1?

15

10

151

0

10

Kristian Wagner

@k_wagner

4 months

Nerd facts - react native but swift portable - built on stack navigator so you get all the benefits of native screens (no messy modals) - can easily be extended with pinch / zoom or any other gestures (might demo this?)

0

10

Kristian Wagner

@k_wagner

2 months

Its concerning watching people fidget with their disconnected phone on a plane says an awful lot about our current state of scroll paralysis

1

0

9

Kristian Wagner

@k_wagner

3 months

@argyleink not convinced this is a great pattern. You end up reusing headers everywhere, lose the scanability of rows and columns, and make it difficult to compare and sort the data in a meaningful way.

1

0

8

Kristian Wagner

@k_wagner

2 months

@matuskropuch @samdape will be coming eventually :)

0

8

Kristian Wagner

@k_wagner

2 months

paper what is your a4 of choice?

0

7

Kristian Wagner

@k_wagner

4 months

nailing minimalism = maximum difficulty but i am so here for the challenge

1

6

Kristian Wagner

@k_wagner

4 months

@_darioroa Yes it is 💯 focused on first making it compatible with react navigation and expo router

0

3

Kristian Wagner

@k_wagner

4 months

Not everything needs to be an infinite list. Placing meaningful limitations on the user can be incredibly powerful, ultimately creating a more worthwhile digital interaction.

0

2

6

Kristian Wagner

@k_wagner

4 months

@anshnanda_ Not yet - but planning to release the entire navigation library on npm later this year

1

0

7

Kristian Wagner

@k_wagner

4 months

show and tell swipe actions #reactnative #buildinginpublic

1

7

Kristian Wagner

@k_wagner

2 months

@ezreeszy @samdape Custom view that acts as keyboard. Has its own delegates and handlers that mimic native keyboard actions, but is fully independent of the regular textfield/keyboard model

1

0

7

Kristian Wagner

@k_wagner

3 months

Here are some of the upcoming scenes I’m working on: - Coffee in the morning - Toast popping - Skylight that opens - Weather thermometer on window Any other good ideas? Any bad ones?

2

0

6

Kristian Wagner

@k_wagner

3 months

@samdape @Jall_n @davidquirinq street cred plummeted

0

2

Kristian Wagner

@k_wagner

5 months

Multiline c̶r̶o̶s̶s̶ ̶o̶u̶t̶ animation. Using this for a little task manager app I'm calling 'Dusty'. #buildinginpublic

1

6

Kristian Wagner

@k_wagner

3 months

@samdape @Jall_n @davidquirinq how did you not buy the hat?!

1

0

2

Kristian Wagner

@k_wagner

4 months

@madzadev Not for one second 🙏

0

1

Kristian Wagner

@k_wagner

4 months

@anshnanda_ No gorham, everything is made with the same library. In my head the modals can just be treated like a view controller instead of a window based modal. Then you can stick to the same transition api for everything and get the benefit of isolating your renders in separate screens

0

3

Kristian Wagner

@k_wagner

4 months

@idhamarsyd Planning to release a public package in the future where everything will be documented 🍀 will also be posting more about how it works in the coming weeks

1

0

3

Kristian Wagner

@k_wagner

3 months

@samdape Makes me want to go on a 90s road trip 👌

1

0

2

Kristian Wagner

@k_wagner

4 months

Often, complex navigation concepts and shared element transitions stand in the way of bringing design to real life. Why dont we change that? Working on a library to easily build and maintain bespoke navigation layouts, without sacrificing performance or readability. Stay tuned.

1

0

3

Kristian Wagner

@k_wagner

4 months

@deutventures coded in react native ✨

1

0

4

Kristian Wagner

@k_wagner

4 months

@akiffpremjee very cool. Always great to make something that has real world value for yourself. Have fun with the animations, always my favourite part.

0

1

Kristian Wagner

@k_wagner

4 months

@onlyfootnotes Oh great shout with the luxo. And the coffee idea is a home run ☕️

0

1

Kristian Wagner

@k_wagner

4 months

more years as a developer doesn't necessarily make you more senior, but it does give you a much stronger sense of intuition, perspective and (hopefully) fading imposter syndrome. time to lean in.

1

0

4

Kristian Wagner

@k_wagner

3 months

@DaehyeonMun this is amazing - cool shader! ✨

0

2

Kristian Wagner

@k_wagner

4 months

@daylightco thank you! 🌞

0

1

Kristian Wagner

@k_wagner

4 months

@VELUX this can also be converted to a window. No prob.

1

0

4

Kristian Wagner

@k_wagner

4 months

@7Marv It sure is, Thanks so much! 💛

0

Kristian Wagner

@k_wagner

4 months

@soren_iverson i mean, if you want a door im your guy 🚪

Kristian Wagner

@k_wagner

4 months

UIDoorController one day, I will find a legitimate use for a door navigation. what would you put behind door number 1?

15

10

151

0

3

Kristian Wagner

@k_wagner

4 months

@lilruno Ooooff thank you! 🇸🇪

0

2

Kristian Wagner

@k_wagner

4 months

@anshnanda_ Plan is to make it very incremental so you can use the library for just one transition if needed or scaffold a whole app around it if you want.

1

0

1

Kristian Wagner

@k_wagner

4 months

@pop977s @akiffpremjee These days there aren’t any real performance differences in production between a bare react native project and expo. Used to think differently, but find it hard to justify not using expo these days, they have made it incredibly easy to start, and scale.

0

1

Kristian Wagner

@k_wagner

4 months

@pop977s @akiffpremjee With an expo managed project you can use expo go, and let expo do all of the heavy lifting in terms of dependency management and native linking (used to be huge pain for some packages). If you need to to use modules that aren’t managed by expo you can create a dev-client build

1

0

1

Kristian Wagner

@k_wagner

4 months

@TommasoCostanza It will be 🫶 currently developing this together with @samdape

0

3

Kristian Wagner

@k_wagner

4 months

Modals for an upcoming project. Built with full customizability over rootview animations, and scrollviews play nice with all dismiss gestures. #reactnative #buildinpublic

0

3

Kristian Wagner

@k_wagner

4 months

@happydesign_ Thank you 🙏

1

0

1

Kristian Wagner

@k_wagner

1 month

Dreaming of F-zero on a long haul flight

0

3

Kristian Wagner

@k_wagner

4 months

@nilseller @samdape This is the way

0

1

Kristian Wagner

@k_wagner

5 months

Letter opening animation on device. bringing @samdape 's work to life.

0

3

Kristian Wagner

@k_wagner

3 months

@samdape @figma 👏 top dog

0

2

Kristian Wagner

@k_wagner

3 months

@Jamesmade_ 😂 the thrill to shill

1

0

2

Kristian Wagner

@k_wagner

4 months

@anshnanda_ Will extend the Native Stack navigator and provide some hooks so you can use it alongside Expo router / React navigation or independently.

1

0

3

Kristian Wagner

@k_wagner

4 months

@SeanRock Code, built with react native. With lots of reanimated magic 🪄

1

0

3

Kristian Wagner

@k_wagner

5 months

@dennushh Beautiful 👏

1

0

2

Kristian Wagner

@k_wagner

4 months

@TyroneC__ @figma can i press it, can press it. please?!

0

1

Kristian Wagner

@k_wagner

4 months

@fer_chvs supa supa

0

1

Kristian Wagner

@k_wagner

4 months

@indes_yo Thank you 💛 coders and non coders, just want to bring a little spark of joy

0

1

Kristian Wagner

@k_wagner

3 months

@faelpontopt Peaky blinders 👌

0

1

Kristian Wagner

@k_wagner

4 months

@ehsantgv back function was a non-negotiable. Really elevates these types of interactions.

0

1

Kristian Wagner

@k_wagner

4 months

@akiffpremjee yup, reanimated. These examples are made in expo, but could just as well be in a bare react native project.

2

0

2

Kristian Wagner

@k_wagner

4 months

@samdape @getpeid 10/10 🪩

0

1

Kristian Wagner

@k_wagner

3 months

@Jamesmade_ think you might need some new developers 😅

1

0

2

Kristian Wagner

@k_wagner

4 months

@engineerBosatsu Summary of how its made (using react native) - flashlist to render the list - reanimated to store the scrollY position - scrollY value is passed to each list item - when list items reach top they offset their position with translateY and scale back with interpolate function

1

0

2

Kristian Wagner

@k_wagner

4 months

@beingsie exactly! needs some work to make the touch zones work but could be fun to use

1

0