{ "id": "67cc6cc7c44ea453f14ec4c85f286a3719c29841408f17ccb5e211a8978003ea", "pubkey": "a9434ee165ed01b286becfc2771ef1705d3537d051b387288898cc00d5c885be", "created_at": 1727771724, "kind": 30818, "tags": [ [ "d", "hypernote-nip" ], [ "client", "wikifreedia", "31990:fa984bd7dbb282f07e16e7ae87b26a2a7b9b90b7246a44771f0cf5ae58018f52:1716498133442" ], [ "summary", "A hypernote is a html-based frame that can be used as Stories or Widgets on the Nostr protocol\n" ], [ "alt", "This is a wiki article about Hypernote\n\nYou can read it on https://wikifreedia.xyz/a/naddr1qvzqqqrcvgpqqqg3waehxw309ahx7um5wghxcctwvshsqrtg09cx2unwda6x2ttwd9cqthn6xx" ], [ "title", "Hypernote" ], [ "c", "Nostr" ], [ "published_at", "1727771724" ] ], "content": "= Hypernote\n\nA hypernote is a html-based frame with [[Nostr]] functionality. \n\nHypernotes offer creators an interactive micro-website: \n\n* that is guaranteed to display in the intended way in any app that implements hypernotes\n* that any Nostr profile can interact with (i.e. sign events) from within other apps\n* that can fetch and display Nostr events that are updated in real-time\n\nThey can be used as:\n\n* *Stories* (360px / 640px)\n* *Widgets* (360px / max 640px)\n* Anything else that makes you think \"Interactive PDF\"\n\n== Limitations that make it work \n=== Standard Dimensions\n\nimage::https://cdn.satellite.earth/9d9fc4cc64e7376bf00031c4fb62381c59b3c98dfd6ca08a929b940da57f85f3.png[]\n\nHypernotes Stories and Widgets have a standard width of 360 pixels and a maximum height of 640 pixels.\nThat way: \n\n* There can be a reasonable guarantee that they are properly displayed across clients and the creator doesn't have to worry about viewers not experiencing the hypernote as intended\n* The html just has to work for one size and implementations don't have to make everything responsive\n* Media, such as background video and images, can be scaled to that size and even low-bandwidth users can render the hypernotes reasonably fast\n* It is compatible with the ratio that is used by Big Tech and with the standard ratio of images\n* Builders can adapt the height to their use case, but cannot make it extend beyond the screens of mobile devices. This ensures that the Story/Widget can be displayed fully on nearly any screen, without having to scroll within the frame.\n* Apps can choose to what size they scale down/up the hypernote in their interfaces depending on the use case. When opened on mobile for example, they will probably prefer scaling it to the full width of the device. \n\nOther (standard) dimensions are welcome for anything that's not a Story or a Widget. \n\n=== No legacy API calls\n\nHypernotes *cannot* communicate with the legacy web. \nHypernotes *can* communicate with the Nostr-verse:\n- fetch nostr events\n- fetch blossom files\n- ... \n\nKeeping the communication channels 100% Nostr-based: \n\n* makes hypernotes more secure and easier to verify/understand\n* ensures more accountability (there's an npub with a reputation behind everything)\n* avoids link-rot (the whole goal of events and blossom files is that they're easily retrievable)\n* incentivizes the building out of Nostr native tools and content types\n* makes it very easy to remix any hypernote. Since all of the building blocks can be transparently displayed, interchanged, adapted and re-uploaded into another hypernote. \n\n=== No scrolling\n\nA hypernote is not scrollable by default. Since it is almost always displayed as a frame within another app, that has its own scroll and swipe actions, you run into UX conflicts when you allow hypernotes to also have native scroll functionalities. \n\nHypernotes creators can (and should) find other ways to let users navigate lists or content that is larger than the hypernote frame. \n\n=== Whitespace\n\nIf used as a Story, hypernotes should have enough whitespace on the left and right side of the frame so users can easily click/tap through them. \nMany apps will overlay headers and footers on these Stories so it is best practice to leave 80 pixels free of any interactive elements on the top and bottom of the hypernote.\n\n== Use Cases\n=== Stories\n\nCreators need a way to build fun, visual content frames that:\n\n* People can click through\n* Have simple interactivity built in\n* They can bundle into multi-frame Stories \n\nExamples of things they can use Stories for:\n\n* Instagram-like Stories (obviously 😉)\n* Reels\n* Their Linktree\n* Their micro-website\n* Interactive Data Visualizations\n* Simple Games \n* ...\n\n=== Widgets\n\nWidgets are a great match for the middle ground between various Nostr apps. \nThey can be used to: \n\n* Show interactive previews of content types in apps that do not support this content type. _Think of: Music album + listen and bookmark buttons, App releases with info + download button, ..._ \n\n* Offer interactivity in Chats that goes way beyond messages. _Think of: Check Outs with Merchants, Custom polls, Date pickers, Christmass present organization, ..._\n", "sig": "4ca04be0f988f197ca84b51064bc1ee5edd7d66b35931d28e6a514a79a04bf64c0d6514d71c1728caff1939a25d98c7273c0b1e0e46058ef9ecc78de24bf383e" }