Blocks
90 larger page sections built from fetaUI components: footers, backgrounds, scroll animations and app screens. Blocks are part of Pro.
Airplane - scroll animationProBlockA line art jet drawn in WebGL that comes apart as you scroll and floats in the air. Drag to look around it.Patch Panel - scroll animationProBlockA 2U patch panel in isometric that comes apart as you scroll: the cables unplug and float out, the faceplate lifts off the jacks, and the rear cable bar drops back.Keyboard - scroll animationProBlockA 65% keyboard in isometric line art that comes apart as you scroll: keycaps, switches, plate, PCB and case.FooterProBlockA page footer: a quote that writes itself in a handwriting face, two hands reaching for each other in live ASCII, links whose labels resolve out of noise on hover, a credit and an edge to edge wordmark cut by the bottom edge.App Download FooterProBlockA display line, two download buttons and the requirements beside an app tile whose heading arrow turns to face the pointer, then three link columns and a bottom bar.Statement FooterProBlockA question set in display type that answers the pointer like a reading light, a brief button and a copy email button, then name, links, a live local clock and legal links.Watermark FooterProBlockBrand and tagline, two link columns and a get in touch block, above the brand word drawn in live characters across the full width on a horizon line. It rises and resolves as it scrolls into view, and answers the pointer anywhere over the footer.Newsletter FooterProBlockA newsletter footer set as type: one display sentence with the email field inside it, the last three issues as quiet rows that show an excerpt on hover, and one line of links.Studio FooterProBlockA studio sign off: a display line, the email at display size with a quiet copy action and a magnetic button, an index of recent work whose preview trails the pointer, and one mono line with the local time.Dispatch FooterProBlockA freight operator footer: a ticker bar, socials, a link grid and payments, the work by tab in a drifting marquee, the home port and desk on a dotted world map, and a dotted wordmark that scatters around the pointer.Mono FooterProBlockA developer kit footer as a terminal session: the about text, a subscribe prompt and the link lists type themselves out, then a prompt waits with a blinking cursor.Grid Wordmark FooterProBlockA ruled grid of statement, link and contact cells over a wordmark built from a live grid of cells. A lens under the pointer carves the letters and lights the grid.Logistics FooterProBlockA live shipment tracker across the top, with the route set large, stop cards and a ship you can drag along its rail, then links, office, contact and payment details, the work by tab and a dotted wordmark cropped by the bottom edge.Landscape FooterProBlockBrand, pitch and three link columns over a light watercolor of farmland that paints itself in the first time it scrolls into view.Directory FooterProBlockA typeset index: a large promise and an A to Z strip, then numbered sections of entries with dotted leaders and counts. A letter brings its entries forward and quiets the rest.Clock FooterProBlockA large headline over four analog city clocks with ticking second hands. Point at a dial to wake it, or drag across the row to scrub time for every city at once.Gradient FooterProBlockA slow colour mesh that leans toward the pointer, with the tagline, a tour button and an oversized wordmark set into its lower edge, then four link columns and legal links.Link Rows FooterProBlockA large call to start with download Buttons, then big numbered rows for help, contact, social and legal. Ink rises into a row under the pointer and its links come forward.Dot FieldProBlockA halftone membrane of dots that follow slow noise, with a wake on a fast swipe and a shockwave on click.Background PathsProBlockA ribbon of 42 hairlines that keeps flowing and parts around the cursor.Shape HeroProBlockA hero where pills and dots drop into a pile you can grab and throw.Flow FieldProBlockAbout 700 particles ride a noisy wind that parts around the cursor and swirls in its wake.Topo BackgroundProBlockA living contour map. The cursor raises a hill and a click drops a ripple.Drape BackgroundProBlockA hanging curtain drawn as a lit heightfield. Tight pleats and small pinches gather at the rod and fan out into billows of uneven width, with a few sharp diagonal crease breaks and a turned hem that hangs lower where a fold comes forward.Halftone BackgroundProBlockA print accurate halftone screen under a slowly moving light. Round dots grow, join at 50% and become round holes in the shadows, and their area is solved in linear light so tones read true from afar.Ink BackgroundProBlockA headline written in ink, run as a real fluid. Stir it and it gathers back into words.Caustics BackgroundProBlockSunlight on a pool floor, a drifting web of light that bends around rings you drop.Rain Glass BackgroundProBlockRain on a window over a soft, out of focus view. Beads of every size refract the view, flipped and shrunk as a real drop does, over a fine mist and patchy condensation. Drag to wipe the glass.ParticlesProBlockA field of drifting dots that lean away from the pointer.Network GraphProBlockGroups of items as a network on a slowly turning sphere, over a layer of drifting motes. Drag to turn it, point at a node to light its links.ASCII ArtProBlockAny picture as live characters, each picked by its brightness, that reveal from a point, flicker now and then and scramble under the pointer.Progressive BlurProBlockEdges that blur from 0 to 10 px, so content scrolls into a soft haze at the top, bottom or both.Weather SkyProBlockOne sky for every kind of weather: an aurora night, rain, snow, clouds, sun rays and sunset. Scrolling turns the weather, and the pointer plays with it.Cylinder CarouselProBlockItems rolling around a cylinder: inside it the centre is smallest and dipped; outside it the centre is largest and raised.Infinite MasonryProBlockA scrollable wall of tiles placed from a design and scaled with the box. Under 640 px they flow into two columns.Pixel RevealProBlockA photo that clears in a ripple of tiles and then takes on its colour.Reveal ImageProBlockA photo that resolves out of a dither field the first time it scrolls into view, then assembles into colour.Inline VideoProBlockA muted, looping clip that fetches nothing until it nears the screen and plays only while in view.OTP LockProBlockA padlock over a code field. It opens when the code is right.OTP VaultProBlockA code picked from a turning sphere of digits, or dialled on tumbler wheels.Timezone PlannerProBlockFind a meeting time across zones. Each ring is one person's day.People DirectoryProBlockSearch, team tabs, a list with presence and a detail pane with a copy email button.Roles and PermissionsProBlockA permission matrix: roles as columns, grouped permissions with mixed group rows, a locked Owner column, and held changes with Save.ProfileProBlockA profile page: cover, avatar, bio, links and counts, with tabs between an activity feed and projects.Seat MapProBlockA cinema seat picker. Click a seat or drag along a row, with priced tiers, a lone seat warning and a booking limit.KanbanProBlockA board of Kanban Columns you drag Kanban Cards between, in Issues, Tasks and Points styles, with a full keyboard path.Webhook TesterProBlockSend a signed test event, check the JSON, and follow signed, sent and response steps.Invoice EditorProBlockEditable line items with quantity, rate and amount, live totals and draft actions.Billing OverviewProBlockBilling settings: current plan, card on file, usage meters and invoices.Usage OverviewProBlockSpend against budget with a projection, the plan, and metered usage with warning and danger states.Section HeadingProBlockThe heading every template block opens with: eyebrow, title, subtitle and actions.Pricing CardProBlockA plan card with name, price, description, features and one Button.Plan OptionProBlockA selectable plan or pack. Selected washes the Row and rings the Card.Hero · DemoProBlockLanding hero with a live agent demo, from the request to the approval.Features · ControlProBlockFive feature cells on a 4% tray about staying in control of agents.Features · DetailsProBlockFour feature cells for the small details: sign-ins, menu bar, shortcut and sharing.Use Cases · CardsProBlockThree real tasks with their agents, time, a small visual and the result.Use Cases · GridProBlockA featured use case with stats, image cards and compact thumbnails.Testimonials · CardsProBlockThree short reviews with stars and authors, plus the store rating.FAQ · SplitProBlockQuestions on the right, heading and support note on the left.FAQ · NumberedProBlockCentered heading and numbered questions.FAQ · BoxedProBlockCentered heading and boxed questions.Logo Cloud · GridProBlockA caption beside a wrapping grid of logo placeholders.Showcase · CraftProBlockFive interaction pieces with their reason and timing.Showcase · Media BentoProBlockA bento of media, live stats and a voice player.Models · RowProBlockSix model tiles with vendor and context size.Features · PillarsProBlockFour product pillars, each with a small visual.Steps · How It WorksProBlockThree image step cards with checklists and a call to action.Hero · MediaProBlockA centered hero with feature pills, a hint line and a large media frame whose picture and caption follow the picked pill.Hero · GlobeProBlockA regions hero: eyebrow, title, lead and Buttons beside a dotted globe whose routes carry packets between three region chips.Hero · Product StageProBlockTitle and Buttons over the app on a 4% stage: top bar, sidebar, grouped issues and a detail panel.Hero · Agent GraphProBlockTitle and Buttons over a run bar and a canvas of agent nodes and connectors.Hero · AnalyticsProBlockTitle, lead and Buttons over a dashboard card with stats and deltas, range Tabs and an area chart with a launch tooltip.Hero · TerminalProBlockTitle and Buttons over a terminal window with a deploy run.Hero · BreatheProBlockA centered wellness hero: rings with a progress arc and countdown, breathing phases, pattern Tabs and Buttons.Studio · HeroProBlockStudio mark and availability, an oversized title, image and ruled columns.Studio · Work IndexProBlockTitle and Outline Button over a media card and a ruled client list.About · IntroProBlockA display title, lead, paragraphs and contact details.About · PrinciplesProBlockThree numbered working principles.About · ServicesProBlockThree service cards on a 4% tray.About · ExperienceProBlockExperience rows beside tool chips.Pricing · ServicesProBlockThree service plans with the Featured one first.Pricing · PlansProBlockThree subscription plans with the Popular one in the middle.Pricing · LayersProBlockPlans as stacked layers beside plan details and Buttons.Pricing · TiersProBlockSection Heading with billing Tabs, three Pricing Cards and a seat calculator.Pricing · CompareProBlockA plan comparison table with plan headers and feature rows.Pricing · CreditsProBlockA credit purchase card: balance, packs and a summary.Pricing · SingleProBlockOne plan on a 4% tray with billing Tabs, price and features.Upgrade · SummaryProBlockAn upgrade review card: plan path, Plan Option cards, Usage Meters and totals.App · Team CalendarProBlockA team calendar app with sidebar, Calendar and a day, week or month of Calendar Events.