Design Engineer – "Floppy haired sugar cookie man" Volume XC N°42 – the New Yorker
Product ∪ Design ∪ Engineering
- Tweets 1,741
- Following 1,774
- Followers 545
- Likes 4,749
Open source: Audio Borealis, a tiny library for the web that draws an audio reactive glow at the bottom of any html element, with no dependencies.
hello-mat.com/design-enginee…
2
4
204
So you want captions over any app your Mac can run?
16 languages, live translations. Local. Private. Fast.
It can also read the microphone so you can hold conversations in multiple languages.
9$ one-time until 31 October. Try it for free today
subtitles-live.com
6
4
80
415,941
In the past, I worked on @getonbeam, a browser with a note taking angle. Pressing ⌥ anytime on the web to capture parts of the page felt magical.
Beam is gone, sadly. So here is the original product demo we made for posterity. An interactive mini-beam <3
hello-mat.com/design-enginee…
1
5
495
Real-time captions for your Mac, with rewind.
Meetings, podcasts, videos, lectures, any app.
16 languages, live translations. Fully local, fully private, nothing ever leaves your Mac.
$9 one-time, no subscription, 7 day free trial
subtitles-live.com
10
9
124
389,263
Des sous-titres en temps réel pour votre Mac, avec retour en arrière.
Meetings, podcasts, videos, cours, compatible avec n'importe quelle app.
16 langues, traduction en temps réel. Entièrement local et privé, rien ne quitte votre Mac.
subtitles-live.com
1
1
11
80,550
I wanted this, so I built it, you can now search through live captions for things you might have missed in a meeting, a podcast or a lecture.
Live captions for anything your Mac can play.
16 languages, live translations. Private. Local. $9 one-time
subtitles-live.com
2
1
142
I needed this, so I built it
Subtitles captions you Mac audio in real time, and optionally live translates it.
16 languages, fully local, fully private. $9 one-time, no subscription, no minutes to buy. Source available.
subtitles-live.com
130
It's hard to demonstrate a live caption app. So I made an interactive demo instead.
Subtitles captions your Mac audio, meetings, podcasts, lectures, videos, and optionally translates real time.
16 languages. Fully local and private. No subscription.
subtitles-live.com
5
5
107
348,625
Subtitles, live captions for whatever your Mac is playing
- Live on Product Hunt: producthunt.com/products/sub…
- Live on tinylaunch: tinylaunch.com/launch/20851-…
Would greatly appreciate your support 🫶
8
1
12
387
Real time captions for whatever your Mac plays.
subtitles-live.com
Meetings, videos, podcasts, lectures, anything.
5$ today. Will go back to 9$ tomorrow. 14 days to change your mind.
Private. Local. One-time payment. No account.
1
21
267,325
A live captions app is hard to film. Captions over a video, in a video, misses the point: it's an overlay over whatever you're doing. Here's a live demo instead, it switches apps mid-sentence, captions running.
$5 this week, then $9. Once. Local.
subtitles-live.com
5
5
103
516,468
Here's an example of how I would approach this.
Live demo on hello-mat.com/design-enginee…
1
1
54
hey @npmjs I know you are probably busy with all the supply chain attacks recently...
But could you fix your dark mode code highlighting color-scheme please?
2
173
I just combined NumberFlow with a Family wallet-style input and open-sourced it.
Animated. Accessible. Free. Zero excuses not to use it.
→ react-number-flow-input 👇
3
1
85
490,761
Want a split flap display, just like the airports or train stations ones? Install this open source react package and you are good to go!
github.com/daformat/react-sp…
11
8
118
573,137
Just released react-split-flap-display on npm / github so everyone can have fun integrating split-flap displays on the web. This ones fully creates the spool, it's as close to the real thing as can be. Install today, and drop a star on github.
github.com/daformat/react-sp…
1
176
Swipe like no one is watching! Introducing react-swipeable-cards, a headless swipeable cards carousel for react, with zero dependency. Discard or send to back, without any clipping (unlike most implementations)
12
6
192
914,265
Just open sourced my react headless carousel component. Snapping, drag-to-scroll, momentum, rubber banding, progressive scroll fade, intelligent pagination... It's packed with hopefully helpful things.
Drop a star 🫶
github.com/daformat/react-he…
1
101
I’m always fascinated when I see tvOS tilting card with parallax, so I rebuilt them with React and Css
So satisfying, although creating the layered images was a bit of a chore
2
1
20
9,129
Design engineering exercise: A slider with a twist. Not my idea, help me find who I stole it from!
Composable, headless, and with support for multi-range and (optionally magnetic) markers
2
1
170
A composable headless slider component with magnetic markers and velocity enabled tooltips (stole the idea, if you know from who, let me know so I can credit)
1
1
119
CSS + JS split flap display, how satisfying is it to rotate the display? This implem actually fully create the spool, as opposed to usual implementations which only render and animate prev / current / next flaps
1
1
123
I got nostalgic and rebuilt a split-flap display component with React and css that I added to design engineering gallery. Unlike most implementations, this one fully creates the drum and rotate all the flaps, instead of just the prev / current / next one.
4
2
15
1,320
Design engineering: a Number Flow (by @MBarvian ) / @family inspired input component. Was frustrated that Number Flow doesn't really give you an input mode. Made with contentEditable (and a lot of sweat), controlled / uncontrolled
Play with it live hello-mat.com/design-enginee…
2
2
11
489
I can't remember where I stole this from, but I think it's still pretty much on point. Getting truer every day
1
92
Slowed down version, @jh3yy is this what you were talking about yesterday? Gnarly calculations but the card never overlaps now and the z-index swapping is invisible
1
1
106
You can send to back the swiped cards: not straightforward to compute the distance so that the card doesn't overlap the rest of the stack when swapping the z-index to send the card backwards. Many implem don't bother Not proud of the code, but works great
hello-mat.com/design-enginee…
1
3
180
Design engineering: in my "cards" phase rn, and was wondering what it would take to make a swipeable cards carousel (cc @Tinder) on the web.
@SkiperUi has one, but I wanted to be able to really flick the cards away. @Gur__vi will like it
Play live: hello-mat.com/design-enginee…
5
2
14
624
Here's the general idea in css.
You'll need to use javascript to update --remaining-backwards and --remaining-forwards variables on scroll
1
3
97
Instead of animating the opacity of the mask when reaching the edges, I prefer to update the length of the mask based on the remaining scroll distance.
I find the effect more natural, smoother and overall more pleasing
See it live: hello-mat.com/design-enginee…
2
11
780
Design engineering: rolling stacking cards
The basic stacking effect is easy to do, but the rolling version is a bit trickier. Scroll-driven animations and a bit of javascript to achieve the effect.
Maybe @jh3yy will be able to make a full css implem?
hello-mat.com/design-enginee…
5
312
Another one, a macOS dock inspired component for the web, accessible to mouse and keyboard users:
hello-mat.com/design-enginee…
6
Design engineering: I'm always frustrated when a carousel component doesn't allow you to drag to scroll, so I built one that fits my needs: snapping, drag to scroll, pagination, momentum, overscroll and rubber-banding. And also, a mask that progressively appears/disappears based on the distance to the edges instead of just blinking in/out abruptly.
Play with it: hello-mat.com/design-enginee…
91
Custom momentum, overscroll and rubber banding on desktop. I didn't like that this only ever happens on touch devices so I implemented them. Also: snapping, pagination and a mask that subtly appears / disappears as you approach the edges instead of blinking in / out
1
97
Light theme images and embeds component
hello-mat.com/design-enginee…
2
83
Light theme details/disclosure component:
hello-mat.com/design-enginee…
81
And here is the light theme version of the dock component
Play with live component: hello-mat.com/design-enginee…
1
81
Design engineering: macOS inspired dock component
play: hello-mat.com/design-enginee…
2
2
163