Samuel @samuelkraft Twitter profile

Pinned Tweet

Samuel

@samuelkraft

7 months

"Hold to complete" interaction

31

43

1K

Last Seen Profiles

@thomas_leech

@kochan_farm

@yunitamiau9

@iam_moyosawyer

@AlvaroD_Designs

@choudharyhakam9

@LeroyDm

@vikschnaderbeck

@stuartpykesport

@park_eunrii

@GreyTyme_

@football_trade

@mistressbe8211

@_NicKage_

@SirMichaelK1952

@Saximum_art

@Benjaminrahmati

@Coach_HHarris

@MustafaBilgicli

@GodsOwnpeterka1

@ulfat_adil22

@ichijowindmusic

@ja_takasaki

@bhima_iam

@kirstylboucher_

@Vman_95

@MedUni_Wien

@eastprospekt

@calmitmeatball

@crampell

@theBSinBSN

@METAOYAZI

@NorthwesternADM

@RhynoBullraq

@stw_pdg

@BallardPhilippe

Samuel

@samuelkraft

1 month

🎛️ Loved animating these isometric api illustrations by @danhollick for the new Raycast site. They’re all SVG:s animated with CSS, here’s how it works (it’s dead simple) 👇

31

55

880

Samuel

@samuelkraft

1 year

My new website/portfolio for 2023 is live ✨ Now with a simpler look, but lots of tiny details to explore! Let me know what you think! 👉

31

29

534

Samuel

@samuelkraft

3 months

Excited to share I’ve joined @raycastapp as a design engineer to expand Raycasts web experiences with @peduarte and the incredible hype team 🥳

30

6

267

Samuel

@samuelkraft

2 years

Built an interactive chart for Trail routes

9

195

Samuel

@samuelkraft

27 days

🏃‍♂️ Just published my Workouts extension for Strava to the @raycastapp store See your latest workouts, get a quick overview of your stats in the menu bar and ask AI anything about your workout data 👇

14

11

174

Samuel

@samuelkraft

5 months

🗓️ I’m building a calendar app for planning and analysing workouts. Had fun building this waitlist page inspired by years of scribbling down my training routines with pen & paper. Taking this to the next level now with smart suggestions, workout syncing, maps and more

16

4

154

Samuel

@samuelkraft

23 days

🎨 New @vercel theme for just dropped with a custom background, color scheme and Geist Mono. Made in collaboration with @mrncst @gennyxdavila and @evilrabbit_ . Try it live 👉

9

14

143

Samuel

@samuelkraft

3 years

Rebuilt with #Nextjs deployed on @vercel . Soo easy and fast 🔥 Love the dev experience

8

6

115

Samuel

@samuelkraft

19 days

🔦 Highlight lines with ⌥ + click at ray.⁠so

8

108

Samuel

@samuelkraft

10 days

👉 👈

5

3

108

Samuel

@samuelkraft

1 month

Just shipped AI Preset Explorer - my fav is the Interactive Storyteller for making stories with my son and Llama 3 makes it super fast ⚡️

Raycast

@raycastapp

1 month

Need inspiration for a preset? Visit to explore pre-built presets for coding, writing, and more

3

0

14

5

60

Samuel

@samuelkraft

2 years

Built for iOS 🏃‍♂️ (and made an overkill launch video)

6

4

52

Samuel

@samuelkraft

20 days

Added some of the most requested languages to ray.⁠so including R, Vue and Julia. What other languages should we add?

10

3

51

Samuel

@samuelkraft

1 month

New raycast site just dropped, packed with details and interactions 🪩

Raycast

@raycastapp

1 month

Our website, redefined. 👉

68

44

816

0

45

Samuel

@samuelkraft

3 years

📝 I wrote a post on creating a Parallax component with Framer Motion #framermotion #react

Spring-based Parallax with Framer motion: Step by step | Samuel Kraft

A guide on creating a spring-based Parallax scrolling effect using Framer Motion and React

samuelkraft.com

0

3

43

Samuel

@samuelkraft

1 month

@vercel x @raycastapp theme on - should we ship it?

3

1

41

Samuel

@samuelkraft

1 year

💛 Like button details

0

33

Samuel

@samuelkraft

3 years

Published a short tip on how to create responsive animations when using framer motion or other javascript animation libraries ✨

Responsive Animations with Framer Motion | Samuel Kraft

How to write responsive variants with media queries in javascript

samuelkraft.com

0

6

32

Samuel

@samuelkraft

1 month

4️⃣ Make a full isometric component library? 😅

1

0

29

Samuel

@samuelkraft

1 year

Rebuilt the long-press menu from Pinterest iOS using React and Framer Motion

1

0

28

Samuel

@samuelkraft

3 years

After 5 amazing years at Tracklib I'm excited to be joining the team at @bitrefill full-time! 🙌

3

2

23

Samuel

@samuelkraft

2 years

Wrapping up this year with some hightlights I helped designed & build with @bitrefill Thread inspired by @skllcrn 🧵👇

3

1

22

Samuel

@samuelkraft

1 year

@jeremygoldbrg Still have mine, I used the camera a single time on a skiing trip

0

24

Samuel

@samuelkraft

1 year

Arc mode! If you are using the @ArcInternet browser you can sync your color scheme with my website.

3

2

24

Samuel

@samuelkraft

1 year

I don’t even want to count the options I tried (and fully coded) before landing on this direction inspired by great sites like , , , . Peek the source:

4

0

21

Samuel

@samuelkraft

9 days

me: posts early wip on slack pedro: TIME TO HYPE THIS UP

Pedro Duarte

@peduarte

9 days

@samuelkraft the manifesto theme 🥵🥵🥵

2

0

9

1

23

Samuel

@samuelkraft

1 month

1️⃣ Import the SVG as a React component and group the paths by each “layer” that should move. Each layer has two classes for the state: the offset starting position and the ending position that is toggled once the illustration enters the viewport.

2

0

15

Samuel

@samuelkraft

2 years

@SHL0MS 888 $CAR ➡️ 888 following - attention to detail is 🔥

1

15

Samuel

@samuelkraft

3 years

@leeerob I built a basic Next.js blog demo using the new API 🤘

2

0

14

Samuel

@samuelkraft

1 month

See them all live 👇

Raycast - Your shortcut to everything

A collection of powerful productivity tools all within an extendable launcher.

www.raycast.com

1

0

14

Samuel

@samuelkraft

3 years

🎶 Added this nifty widget to 's footer fetching what I'm currently listening via Spotify's api thanks to @leeerob

3

0

14

Samuel

@samuelkraft

2 years

Made with d3 based on @samselikoff ’s great tutorial

Building an Animated Line Chart with d3, React and Framer Motion

Learn how to build an animated chart in React using d3, Framer Motion, Tailwind CSS and date-fns.🪄 Framer motion course: https://samselikoff.com/framer-moti...

www.youtube.com

1

14

Samuel

@samuelkraft

1 month

3️⃣ Some illustrations are a bit trickier when the layers needs to stack differently depending on the state. For example the switch “knob” needs to sit above the “back edge” but below the “front edge”. The trick is separating those parts directly in the SVG in order to layer it

2

0

14

Samuel

@samuelkraft

1 month

2️⃣ Each group is then animated with css transitions using transforms and opacity, using transition-delays to orchestrate the animation. A custom easing curve makes the movement feel natural and snappy. Any color changes are handled by updating their css variables.

1

0

13

Samuel

@samuelkraft

2 years

Digital Photo Paper

1

0

13

Samuel

@samuelkraft

2 years

*Scanning*📸 @bitrefill

0

13

Samuel

@samuelkraft

3 years

Just shipped a redesigned homepage for @tracklib ! 🎶✨ Featuring animations and parallax with Framer Motion, interactive playable albums and more! Check it out at #framermotion #React

3

4

12

Samuel

@samuelkraft

5 months

Looking for a fast and enjoyable workout planner? Sign up for the waitlist ⤵

Shape - Workout calendar

Shape is all about you and your goals. No unnecessary social features or privacy nightmares, just a beautifully designed calendar app that helps you plan and analyze your workouts.

shape.samuelkraft.com

2

0

12

Samuel

@samuelkraft

3 years

📝 New post: I recreated the Segmented Control from ios in ⁦ React⁩ with ⁦Framer Motion. There’s a couple of neat micro-interactions and animations ✨ #reactjs #framermotion

Segmented Control for web with Framer Motion | Samuel Kraft

Animating an iOS-like segmented control for the web using Framer Motion

samuelkraft.com

1

4

12

Samuel

@samuelkraft

3 months

X compression killing the quality as usual, live view 👇

Raycast | Samuel Kraft

I'm joining Raycast as a design engineer

samuelkraft.com

1

0

11

Samuel

@samuelkraft

3 years

My Notion/Next.js blog repo just passed 300 stars on GitHub ✨🙌 @NotionAPI

0

1

11

Samuel

@samuelkraft

2 years

We built a stupid (or genius?) sneaker showing the realtime BTC price. Like, have you ever worn a shoe with built-in internet in the sole? 🤯

Bitrefill

@bitrefill

2 years

🚀Bitrefill teams w. NBA star Spencer Dinwiddie introducing Bitsneaks!🚀 World’s slickest & most high tech sneaker. Displaying the real-time price & block height of BTC! Check it out @ . Retweet for a chance to win a pair! #bitsneaks

140

659

708

2

1

11

Samuel

@samuelkraft

1 year

🌒 Bring your headlamp - just shipped dark mode for Super smooth thanks to the amazing @radix_ui colors

0

10

Samuel

@samuelkraft

7 months

@Delmo_dev Yep! A calendar app for workout planning/analyzing

2

0

9

Samuel

@samuelkraft

3 years

Hello 14" 😍

2

0

10

Samuel

@samuelkraft

2 years

@uiarchive Right in the feels ❤️ Path was so fun

0

9

Samuel

@samuelkraft

2 years

Diving head first into SwiftUI, wish me luck

3

0

9

Samuel

@samuelkraft

27 days

Get the extension 👇

Raycast - Workouts

Stay on top of your workouts

www.raycast.com

0

9

Samuel

@samuelkraft

19 days

Try it live 👉

Ray.so - Create beautiful images of your code

Turn your code into beautiful images. Choose from a range of syntax colors, hide or show the background, and toggle between a dark and light window.

ray.so

0

8

Samuel

@samuelkraft

2 years

Great collection of open source personal websites! So helpful to peek at the source when learning new things ✨

Brian Lovin

@brian_lovin

2 years

Oooh, another fun GitHub List idea: open source personal websites 🔥 My collection so far: Hit me with some more repo links!

86

65

656

0

7

Samuel

@samuelkraft

2 years

Woah @css picked up my article on fractional SVG stars 😍👇

CSS-Tricks

@css

2 years

Fractional SVG stars with CSS

0

5

27

2

0

7

Samuel

@samuelkraft

2 years

My Notion blog template just crossed 500 stars on GitHub! ⭐️6 contributors and counting!

GitHub - samuelkraft/notion-blog-nextjs: Next.js example blog powered by Notion Public API

Next.js example blog powered by Notion Public API. Contribute to samuelkraft/notion-blog-nextjs development by creating an account on GitHub.

github.com

0

7

Samuel

@samuelkraft

2 years

@PriorPierre Feel free to use & remix

GitHub - samuelkraft/routes: Trail Routes - Curated running & hiking trails

Trail Routes - Curated running & hiking trails. Contribute to samuelkraft/routes development by creating an account on GitHub.

github.com

1

7

Samuel

@samuelkraft

2 years

Super excited for what the team will build in 2022, be sure to try @bitrefill if you haven't already! 🚀

0

6

Samuel

@samuelkraft

1 year

@dennismuellr @nlevin @nikolasklein @rich_cahill @tryamie @Spotify workouts from strava

1

0

6

Samuel

@samuelkraft

2 months

@emilkowalski_ @ClerkDev Congrats Emil! 🔥

0

4

Samuel

@samuelkraft

2 years

@joebell_ A simple next.js app with mdx goes very far. Here's my WIP starter repo

GitHub - samuelkraft/design-system: A design system starter repo

A design system starter repo. Contribute to samuelkraft/design-system development by creating an account on GitHub.

github.com

2

0

6

Samuel

@samuelkraft

2 years

Made with SwiftUI and @Mapbox . “Backend” is simply an API route on @vercel from

Trail Routes: Curated running & hiking routes

Explore curated trails for hiking & running.

routes.samuelkraft.com

0

6

Samuel

@samuelkraft

3 years

Funny "bug" when updating my site to Next 12: <Image /> wrapper is now a <span>, so the album art in my music widget animates just like the eq bars 😅 Learning: Too generic CSS selectors are dangerous

1

0

6

Samuel

@samuelkraft

1 month

@leeerob @thomaspaulmann Already there 🫡

1

0

4

Samuel

@samuelkraft

3 years

✨ Shipped an updated theme switcher to my site adding the option of following your system setting. I love that magical feeling when you have your system set to automatic and everything changes in front of your eyes 👀 Try it:

2

0

5

Samuel

@samuelkraft

2 years

@samselikoff Ooh super nice 🙌 Only thing missing is the message tails ;)

How to create iOS chat bubbles in CSS | Samuel Kraft

Creating a chat messaging app ui with CSS (with a sprinkle of JS and Framer Motion)

samuelkraft.com

1

2

5

Samuel

@samuelkraft

3 years

Built with #nextjs @Mapbox @tailwindcss #framermotion it parses gpx files to geoJson at build time, then renders as a static page on @vercel . Really enjoying this stack ⚡️❣️ Full source code on my github

GitHub - samuelkraft/routes: Trail Routes - Curated running & hiking trails

Trail Routes - Curated running & hiking trails. Contribute to samuelkraft/routes development by creating an account on GitHub.

github.com

3

1

5

Samuel

@samuelkraft

2 years

Improved payment flow if things go bad; refund flows, underpaid orders, pending tx etc

1

0

5

Samuel

@samuelkraft

3 years

🌟 CSS Blend Modes have lots of interesting use-cases, in this post on the blog I show how it can be used to color parts of an svg by building a star rating component!

Fractional SVG stars with CSS | Samuel Kraft

Create a rating component with svg stars that support fractional values

samuelkraft.com

0

5

Samuel

@samuelkraft

1 year

Added a tiny image gallery of me and things I enjoy, plus an @anydistanceclub -inspired activity photo displaying my latest workouts from strava

1

0

5

Samuel

@samuelkraft

1 year

The most important addition was case studies of previous work

1

0

5

Samuel

@samuelkraft

3 years

We can finally start using bottom tab bars on the mobile web with iOS 15 🙌 Safari no longer requires two taps at the bottom of the screen if you respect the 'safe areas'. See how 👇

Using Bottom Tab Bars on Safari iOS 15 | Samuel Kraft

How to safely design and develop web tab bars on Safari 15

samuelkraft.com

2

3

5

Samuel

@samuelkraft

3 years

@kalasjocke Take a look at , I really dig SWR

1

0

4

Samuel

@samuelkraft

2 years

@Madisonkanna @bitrefill is hiring 👋

Frontend Developer - Bitrefill

This is a rare opportunity to join a respected and rapidly growing Bitcoin-based business.

careers.bitrefill.com

0

4

Samuel

@samuelkraft

3 years

✍️ Want to start blogging using @NotionHQ as a CMS? I wrote a post on how I built an open-source blog using their new public API and Next.js @NotionAPI

Building a blog with Notions public API | Samuel Kraft

How to use Notion as a CMS using their public API and Next.js

samuelkraft.com

0

4

Samuel

@samuelkraft

3 years

@dominiksumer Thanks Dominik 🙏

0

3

Samuel

@samuelkraft

3 years

Shipped an update to Trail Routes this weekend adding support for Swimrun 🏃🏊 In the beginning it feels pretty weird to swim with shoes and run with wet clothes, but it's super fun and is growing a lot in popularity! First route: Långsjön

1

0

4

Samuel

@samuelkraft

2 years

@raunofreiberg Looks great! I designed literally the exact same thing in Figma this morning for my own site 🙈 mad timing!

2

0

4

Samuel

@samuelkraft

2 years

@darylginn

Samuel Kraft - Design engineer

I design & build interfaces

samuelkraft.com

1

0

4

Samuel

@samuelkraft

1 month

@raycastapp Have a really great preset you'd like to share? Contribute to the open source repo

GitHub - raycast/preset-explorer: Easily browse, share, and add AI Presets to Raycast

Easily browse, share, and add AI Presets to Raycast - raycast/preset-explorer

github.com

0

4

Samuel

@samuelkraft

3 years

@pacocoursey @vercel My favourite I've built is a Next site showing curated running/hiking/swimrun routes 🏃 I use it almost daily and love it

2

0

4

Samuel

@samuelkraft

27 days

📊 Glanceable stats See your mileage over time in the menu bar.

2

0

4

Samuel

@samuelkraft

1 year

@brian_lovin so fun to play around with the themes and see it on your own things 😍

0

4

Samuel

@samuelkraft

2 years

@lee94josh @dustin @jedmund Love the "later" idea, going to adopt that one!

1

0

3

Samuel

@samuelkraft

3 years

@neversitdull Haven't tried Gatsby but Next has an amazing dev experience and works great with @vercel

0

3

Samuel

@samuelkraft

11 days

@DanHollick @raycastapp 🫶

0

3

Samuel

@samuelkraft

3 months

@JordanAmblin very hot

0

3

Samuel

@samuelkraft

2 years

‣ Browse and search routes offline ‣ See your location on the trail ‣ Download routes (GPX)

1

0

3

Samuel

@samuelkraft

15 days

@MaximeHeckel Looks really cool! Love the uniqueness

0

3

Samuel

@samuelkraft

7 months

@felipe_mattioni Thx! I’m building a calendar for planning and analyzing workouts

0

2

Samuel

@samuelkraft

2 years

Espresso will always have a special place in my heart for teaching me to write CSS ❤️ the visual css inspector was a really good way to learn the available properties and tweak details. Thanks @janvanwtf

Jan Van Boghout

@janvanwtf

2 years

This never made it, but here’s a blast from the past that I totally forgot about. ⁦ @espressoapp ⁩ on your phone!

2

0

31

0

3

Samuel

@samuelkraft

3 years

🌳Just shipped a big SEO update for Trail Routes! Now includes meta tags and sharing images generated with canvas and @Mapbox 's static image api. Check it out: #builtwithmapbox #buildinpublic

Booleden + Värmdöleden | Trail running & hiking route

Not for the faint of heart! This trail combines Booleden and Värmdöleden for around 40km of (mostly) trails. Booleden (15km) starts at Boo Hembygsgård in Orminge and leads to Strömmen on the border...

routes.samuelkraft.com

2

0

3

Samuel

@samuelkraft

2 years

@leeerob @vercel Big congrats! 🙌

0

3

Samuel

@samuelkraft

13 days

@evilrabbit_ @MatthewStanciu oh that's sick haha

0

3

Samuel

@samuelkraft

3 years

@AddisonSchultz @mattgperry @framer Framer Motion makes this sooo easy in react as well. Did a very similar component the other day

Segmented Control for web with Framer Motion | Samuel Kraft

Animating an iOS-like segmented control for the web using Framer Motion

samuelkraft.com

1

0

3

Samuel

@samuelkraft

11 days

@emlez_ Very nice! thanks a lot for contributing 🫡

1

0

3

Samuel

@samuelkraft

2 years

@peduarte I did mine with 3 options like this

Samuel

@samuelkraft

3 years

✨ Shipped an updated theme switcher to my site adding the option of following your system setting. I love that magical feeling when you have your system set to automatic and everything changes in front of your eyes 👀 Try it:

2

0

5

1

0

3

Samuel

@samuelkraft

2 years

New product pages with barcode/qr codes for easier in-store redemption.

1

0

3

Samuel

@samuelkraft

3 years

💡ProTip! Velcro your external drives to the back of your laptop to stay portable and keeping them safe

0

3

Samuel

@samuelkraft

2 years

@danielcranney 0. But kinda cheating by hiding everything 😅 All files are accessible via Finder > Desktop

0

3

Samuel

@samuelkraft

3 months

@raycastapp @peduarte

0

3

Samuel

@samuelkraft

2 years

Third success: Navigation, remote image loading & opening external links in a SFSafariView. Also learned about accentColor (go orange!) and ButtonStyle

1

0

3