Fiber Storybook: Explaining Fiber Through Pico’s Airport Journey

Hi everyone,

I recently made Fiber Storybook, a small interactive demo that explains Fiber Network through Pico’s airport journey.

Preview: https://fiber-storybook-seven.vercel.app/
GitHub: GitHub - yfeng2824/fiber-storybook · GitHub

(A small note before you try it: the demo is currently best viewed on desktop. It works as a visual story, so making every scene feel good on smaller screens will take more layout work. I may work on a follow-up PR for responsiveness later.)

I wanted to make this because Fiber has a lot of interesting technical ideas, but I think some of its value is easier to feel through a simple everyday story. So instead of starting with payment channels, routing, or multi-asset swaps, I started with a familiar situation: Pico is at the airport.

Airports are full of small services. You might need a nap pod, luggage storage, or a massage chair before boarding. International travelers also naturally deal with different currencies and assets. That makes the airport a useful setting to explain what Fiber can improve.

The storybook currently has two chapters:

Chapter 1: Pay Only for What You Use

The first chapter is about streaming service at a nap pod. Today, many services still ask users to choose a fixed package: 30 minutes, 1 hour, 2 hours, and so on.
That works, but it can feel a little unfair. If Pico only sleeps for 17 minutes, paying for 30 minutes is not ideal. This kind of package model is often used because very small continuous payments are hard to make smooth with traditional payment systems. Card payments can have fixed transaction costs, and repeated checkout flows would feel terrible for users.

Fiber offers a different model. With Fiber, Pico can open a payment channel once. After that, the nap pod can update the payment off-chain while Pico is sleeping. When the session ends, the final result is settled. This makes pay-by-use services feel much more natural.

Chapter 2: One Pass for Multiple Services

Chapter 2 is about using one pass for multiple airport services. Today, many small services still feel like separate payment moments. Luggage storage may ask for one approval. A massage chair may ask for another. Different services might accept different assets. That works, but it can feel clunky. If Pico only wants to use a few small services before boarding, stopping each time to approve, confirm, and think about the right asset is not ideal. The services are simple, but the payment flow can become heavier than the actual experience.

Fiber offers a different model. With Fiber, Pico can open one payment channel to the Fiber Airport Pass. The pass acts like a hub node with routes and liquidity connected to different airport services. After that, Pico can use multiple services through the same pass, while Fiber routes the payments behind the scenes.

The asset part matters too. In the story, Pico has CKB. Luggage storage accepts CKB, so that part is straightforward. The massage chair accepts sats, so the hub bridges Pico’s CKB payment to a sats payment over a supported Lightning route. This is also the direction Fiber is actively moving toward: broader asset swaps, more flexible routes, and a smoother payment experience for users.

What I Hope This Shows

Fiber has many technical ideas behind it, but I think its value becomes easier to understand when we look at everyday situations.

With Fiber Storybook, I wanted to show what payments could feel like if they were smaller, smoother, and less interruptive. Of course, this is still a simplified demo. Some parts are based on the direction Fiber is actively moving toward, especially around broader asset swaps and cross-chain routing. But I hope the story makes the user experience easier to imagine.

I’d love to hear what you think. Feedback on the story, technical accuracy, or other real-world scenarios for Fiber would be very welcome. If there are other everyday payment problems where you think Fiber could help, please share them too. I might be able to turn those ideas into another Pico story.

10 Likes

Really cool Yuqi, thanks for making this!

One thing I found a bit hard to understand was the channels for the luggage and massage chair part.

Pico has a channel with 1000 CKB and the luggage channel has 5000 CKB.

But I’m unsure who has funded the Luggage channel with the 5000CKB (and the Lightning Channel with 100,000 Sats)
Is that also Pico’s CKB and the 1000CKB is just the spending limit that he set? Or is the luggage channel funded by the Luggage company? I’m confused by this part, I think an extra page explaining this part would be good.

1 Like

Good question. In this demo, the 5,000 CKB in the luggage channel and the 100,000 sats in the massage route are not Pico’s CKB.

The 1,000 CKB Pico set up earlier remains in his own payment channel with the Fiber Airport Pass. It represents the liquidity Pico makes available for that pass session.

The luggage channel is a separate channel between the Fiber Airport Pass hub node and the luggage service. In this demo, I’m assuming the hub node provides the 5000 CKB for this channel, because it is the party that routes Pico’s payments to the luggage service. Same idea for the massage route.

More generally, when a payment channel is opened, the two parties can decide how much funds to lock in. It can be fully funded by one party, or both parties can contribute depending on their needs.

I agree the demo doesn’t explain this part clearly enough, and I’ll try to add a page to improve it. Thanks for the feedback. It’s also really helpful for us to improve the Fiber docs.

2 Likes

Good work, I like the feeling of storytelling of this interactive project, keep working!

2 Likes

I updated several scenes in Chapter 2 to make the liquidity flow clearer (Clarify Chapter 2 liquidity flow by yfeng2824 · Pull Request #4 · yfeng2824/fiber-storybook · GitHub). The following sceenshot is one example, showing the updated main scene for the service liquidity explanation.


Hopefully these updated scenes makes the liquidity side clearer, especially the distinction between Pico-funded liquidity and hub-provided liquidity.

3 Likes

Hi Yuqi, thanks for taking the time to add the extra info, I just went through the story again and that definitely helps to make things clearer about where the 5000 CKB and 100k sats came from.

Sorry about this haha, but there’s something else which I think is a bit confusing. In this screenshot:

Pico’s CKB is down to 995.7 because it has paid Fibre Pass 4.3 CKB…this makes complete sense.

But Fiber Pass’s Channel is down from 5000CKB to 4995.7CKB because it has paid 4.3CKB to the Luggage channel.

This looks like Fiber Pass is losing money.

I understand this isn’t the case and Fiber Pass is just passing on Pico’s CKB to the Luggage Store.

But for the image to make sense, I think that the orange channel distribution boxes also need to be updated as the CKB is moving, so Pico’s Channel Total depletes at the same rate as the Pico CKB (995.7) while the Fiber Pass Total always stays at 5000CKB, showing that the CKB is just ‘passing through’ and the channel liquidity remains the same.

Hi Yeti, thank you for your feedback!

I’m not sure if I understood your point correctly, but if you mean the Fiber Pass side of the luggage channel should always stay at 5,000 CKB, I don’t think that is necessarily correct.

In this case, Fiber Pass receives 4.3 CKB from Pico through the Pico channel, and pays 4.3 CKB to the luggage service through the luggage channel. So Fiber Pass is not losing money overall: its balance increases on one channel and decreases on another, making the net change 0 in this simplified demo.

The Total: 5,000 CKB on the orange bar represents the total liquidity across the entire luggage channel. It does not represent the liquidity on Fiber Pass’s side only. The total channel liquidity remains the same, but the liquidity split between Fiber Pass and the luggage service changes as payments happen.

In a real-world scenario, the hub node could also earn a routing fee, but this demo keeps that part out to make the story simpler.