{"id":596,"date":"2026-11-02T12:10:19","date_gmt":"2026-11-02T15:10:19","guid":{"rendered":"https:\/\/brunopavani.com\/?page_id=596"},"modified":"2026-11-02T12:20:39","modified_gmt":"2026-11-02T15:20:39","slug":"playground","status":"publish","type":"page","link":"https:\/\/brunopavani.com\/?page_id=596","title":{"rendered":"Playground"},"content":{"rendered":"\n<style>\n#bp-playground {\n  --pg-accent: #8dea79;\n  --pg-text: #f5f6f4;\n  --pg-muted: #a8b0ac;\n  --pg-line: #2c3133;\n  width: 100%;\n  color: var(--pg-text);\n  font-family: Inter, \"Helvetica Neue\", Arial, sans-serif;\n  font-size: 16px;\n  font-style: normal;\n  line-height: 1.75;\n  overflow-wrap: break-word;\n}\n\n#bp-playground *,\n#bp-playground *::before,\n#bp-playground *::after {\n  box-sizing: border-box;\n}\n\n#bp-playground p,\n#bp-playground a,\n#bp-playground h2,\n#bp-playground h3,\n#bp-playground figcaption {\n  font-style: normal;\n}\n\n#bp-playground .pg-label {\n  margin: 0 0 14px;\n  color: var(--pg-accent);\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1.6;\n  letter-spacing: .12em;\n  text-transform: uppercase;\n}\n\n#bp-playground .pg-opening {\n  padding: 0;\n  margin: 0;\n}\n\n#bp-playground .pg-opening-title {\n  margin: 0 0 18px;\n  color: var(--pg-text);\n  font-size: clamp(28px, 3.2vw, 42px);\n  font-weight: 600;\n  line-height: 1.15;\n  letter-spacing: -.045em;\n}\n\n#bp-playground .pg-intro {\n  max-width: 720px;\n  margin: 0;\n  color: var(--pg-muted);\n  font-size: clamp(17px, 1.6vw, 20px);\n  font-weight: 400;\n  line-height: 1.75;\n}\n\n#bp-playground .pg-nav {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px 26px;\n  margin: 22px 0 0;\n}\n\n#bp-playground a {\n  color: var(--pg-accent);\n  text-decoration: none;\n}\n\n#bp-playground a:hover {\n  color: var(--pg-accent);\n  text-decoration: underline;\n  text-underline-offset: 5px;\n}\n\n#bp-playground a:focus-visible {\n  outline: 2px solid var(--pg-accent);\n  outline-offset: 5px;\n}\n\n#bp-playground .pg-nav a,\n#bp-playground .pg-link {\n  display: inline-flex;\n  align-items: center;\n  min-height: 44px;\n  font-size: 14px;\n  line-height: 1.5;\n}\n\n#bp-playground .pg-section {\n  margin: 52px 0 0;\n  padding: 48px 0 0;\n  border-top: 1px solid var(--pg-line);\n  scroll-margin-top: 32px;\n}\n\n#bp-playground .pg-opening + .pg-section {\n  margin-top: 32px;\n}\n\n#bp-playground .pg-copy {\n  display: grid;\n  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);\n  gap: 36px;\n  align-items: start;\n}\n\n#bp-playground .pg-title {\n  margin: 0 0 20px;\n  color: var(--pg-text);\n  font-size: clamp(30px, 4vw, 48px);\n  font-weight: 600;\n  line-height: 1.12;\n  letter-spacing: -.045em;\n}\n\n#bp-playground .pg-text {\n  max-width: 740px;\n  margin: 0 0 20px;\n  color: var(--pg-muted);\n  font-size: 16px;\n  line-height: 1.8;\n}\n\n#bp-playground .pg-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px 24px;\n}\n\n#bp-playground .pg-image {\n  margin: 28px 0 0;\n}\n\n#bp-playground img {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n  height: auto;\n  border-radius: 4px;\n}\n\n#bp-playground figcaption {\n  margin: 10px 0 0;\n  color: var(--pg-muted);\n  font-size: 12px;\n  line-height: 1.6;\n}\n\n#bp-playground .pg-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 32px 24px;\n  margin-top: 28px;\n}\n\n#bp-playground .pg-card {\n  min-width: 0;\n  margin: 0;\n}\n\n#bp-playground .pg-card-image {\n  display: block;\n}\n\n#bp-playground .pg-card img {\n  aspect-ratio: 16 \/ 9;\n  object-fit: contain;\n  background: #141819;\n}\n\n#bp-playground .pg-card-title {\n  margin: 16px 0 8px;\n  color: var(--pg-text);\n  font-size: 20px;\n  font-weight: 600;\n  line-height: 1.35;\n  letter-spacing: -.025em;\n}\n\n#bp-playground .pg-gallery-footer {\n  margin: 26px 0 0;\n}\n\n#bp-playground .pg-note {\n  margin: 40px 0 0;\n  padding-top: 22px;\n  border-top: 1px solid var(--pg-line);\n  color: var(--pg-muted);\n  font-size: 12px;\n  line-height: 1.7;\n}\n\n@media (max-width: 700px) {\n  #bp-playground .pg-copy {\n    grid-template-columns: minmax(0, 1fr);\n    gap: 4px;\n  }\n\n  #bp-playground .pg-section {\n    margin-top: 38px;\n    padding-top: 34px;\n  }\n\n  #bp-playground .pg-opening + .pg-section {\n    margin-top: 26px;\n  }\n\n  #bp-playground .pg-title {\n    margin-bottom: 16px;\n  }\n\n  #bp-playground .pg-grid {\n    grid-template-columns: minmax(0, 1fr);\n    gap: 30px;\n  }\n\n  #bp-playground .pg-nav {\n    gap: 4px 20px;\n    margin-top: 18px;\n  }\n\n  #bp-playground .pg-image {\n    margin-top: 22px;\n  }\n}\n<\/style>\n\n<div id=\"bp-playground\" lang=\"en\">\n\n  <div class=\"pg-opening\">\n    <p class=\"pg-label\">Beyond product design<\/p>\n\n    <h2 class=\"pg-opening-title\">\n      Games, art &amp; other worlds.\n    <\/h2>\n\n    <p class=\"pg-intro\">\n      I explore storytelling, atmosphere, and interaction through games\n      and visual experiments. Here are selected projects from Flying Frog\n      and interface studies from my ArtStation portfolio.\n    <\/p>\n\n    <nav class=\"pg-nav\" aria-label=\"Playground sections\">\n      <a href=\"#pg-games\">Selected games \u2193<\/a>\n      <a href=\"#pg-art\">ArtStation gallery \u2193<\/a>\n      <a href=\"#pg-studio\">Flying Frog \u2193<\/a>\n    <\/nav>\n  <\/div>\n\n  <section\n    class=\"pg-section\"\n    id=\"pg-games\"\n    aria-labelledby=\"pg-hope-title\">\n\n    <div class=\"pg-copy\">\n      <div>\n        <p class=\"pg-label\">01 \/ Poetry, choice &amp; atmosphere<\/p>\n        <h2 class=\"pg-title\" id=\"pg-hope-title\">Verses of Hope<\/h2>\n      <\/div>\n\n      <div>\n        <p class=\"pg-text\">\n          A missing line becomes a choice. In Verses of Hope, completing\n          a poem changes the world around Hope: its atmosphere, music,\n          story and the level itself. Language becomes something you\n          play with.\n        <\/p>\n\n        <p class=\"pg-text\">\n          My ArtStation study looks at the interface within that world:\n          contextual prompts, a readable poetry overlay and a restrained\n          HUD that leaves space for the scene.\n        <\/p>\n\n        <div class=\"pg-actions\">\n          <a\n            class=\"pg-link\"\n            href=\"https:\/\/flyingfrog.com.br\/verses-of-hope\/\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\">\n            Explore the game \u2197\n          <\/a>\n\n          <a\n            class=\"pg-link\"\n            href=\"https:\/\/www.artstation.com\/artwork\/RK1yeA\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\">\n            View the UI study \u2197\n          <\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <figure class=\"pg-image\">\n      <img\n        src=\"https:\/\/flyingfrog.com.br\/wp-content\/uploads\/2026\/06\/Screenshot_2.png\"\n        alt=\"A warmly lit library environment from Verses of Hope\"\n        loading=\"eager\"\n        decoding=\"async\">\n\n      <figcaption>\n        Verses of Hope \u00b7 Environment image from Flying Frog Studios.\n      <\/figcaption>\n    <\/figure>\n  <\/section>\n\n  <section\n    class=\"pg-section\"\n    aria-labelledby=\"pg-tom-title\">\n\n    <div class=\"pg-copy\">\n      <div>\n        <p class=\"pg-label\">02 \/ Movement, timing &amp; persistence<\/p>\n        <h2 class=\"pg-title\" id=\"pg-tom-title\">\n          Tom\u2019s Last Adventure\n        <\/h2>\n      <\/div>\n\n      <div>\n        <p class=\"pg-text\">\n          Tom\u2019s journey turns the search for a new home into a demanding\n          precision platformer. Double jumps, dashes and star powers\n          open new ways through difficult spaces.\n        <\/p>\n\n        <p class=\"pg-text\">\n          Where Hope builds a world around words, Tom\u2019s adventure puts\n          movement at the centre: reading a route, committing to a jump,\n          and trying again.\n        <\/p>\n\n        <a\n          class=\"pg-link\"\n          href=\"https:\/\/flyingfrog.com.br\/toms-last-adventure\/\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\">\n          Explore Tom\u2019s journey \u2197\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <figure class=\"pg-image\">\n      <img\n        src=\"https:\/\/flyingfrog.com.br\/wp-content\/uploads\/2026\/09\/Cabecalho-biblio-grande-scaled.png\"\n        alt=\"Dark platforming environment with red hazards and glowing star powers in Tom\u2019s Last Adventure\"\n        loading=\"lazy\"\n        decoding=\"async\">\n\n      <figcaption>\n        Tom\u2019s Last Adventure \u00b7 Gameplay image from Flying Frog Studios.\n      <\/figcaption>\n    <\/figure>\n  <\/section>\n\n  <section\n    class=\"pg-section\"\n    aria-labelledby=\"pg-zoe-title\">\n\n    <div class=\"pg-copy\">\n      <div>\n        <p class=\"pg-label\">03 \/ Story, loss &amp; perspective<\/p>\n        <h2 class=\"pg-title\" id=\"pg-zoe-title\">Zoe<\/h2>\n      <\/div>\n\n      <div>\n        <p class=\"pg-text\">\n          Zoe follows a little dog learning about death and the different\n          ways it can be understood. The project combines a 2D platformer\n          with puzzles, using its story and surrounding art to explore\n          a difficult subject.\n        <\/p>\n\n        <a\n          class=\"pg-link\"\n          href=\"https:\/\/flyingfrog.com.br\/zoe\/\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\">\n          Discover Zoe \u2197\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <figure class=\"pg-image\">\n      <img\n        src=\"https:\/\/brunopavani.com\/wp-content\/uploads\/2026\/11\/zoe2.png\"\n        alt=\"Environment artwork from Zoe\"\n        loading=\"lazy\"\n        decoding=\"async\">\n\n      <figcaption>\n        Zoe \u00b7 Environment artwork from Flying Frog Studios.\n      <\/figcaption>\n    <\/figure>\n  <\/section>\n\n  <section\n    class=\"pg-section\"\n    id=\"pg-art\"\n    aria-labelledby=\"pg-gallery-title\">\n\n    <p class=\"pg-label\">04 \/ Interface studies<\/p>\n\n    <h2 class=\"pg-title\" id=\"pg-gallery-title\">\n      Different worlds. The same eye for clarity.\n    <\/h2>\n\n    <p class=\"pg-text\">\n      Battle screens, poetry overlays, arcade HUDs and pixel inventories\n      each need their own visual language. These studies explore how\n      an interface can belong to a game\u2019s world and still help the\n      player find their way.\n    <\/p>\n\n    <div class=\"pg-grid\">\n\n      <article class=\"pg-card\">\n        <a\n          class=\"pg-card-image\"\n          href=\"https:\/\/www.artstation.com\/artwork\/gRz0GE\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"View Kundara on ArtStation in a new tab\">\n          <img\n            src=\"https:\/\/cdna.artstation.com\/p\/assets\/images\/images\/096\/876\/728\/large\/bruno-pavani-ui-batalha.webp?1772552283\"\n            alt=\"Kundara card battle interface\"\n            loading=\"lazy\"\n            decoding=\"async\">\n        <\/a>\n\n        <h3 class=\"pg-card-title\">\n          Kundara \u2014 Card Battle UI\/UX\n        <\/h3>\n\n        <p class=\"pg-text\">Interface study \u00b7 Mikan Studio<\/p>\n\n        <a\n          class=\"pg-link\"\n          href=\"https:\/\/www.artstation.com\/artwork\/gRz0GE\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\">\n          View project on ArtStation \u2197\n        <\/a>\n      <\/article>\n\n      <article class=\"pg-card\">\n        <a\n          class=\"pg-card-image\"\n          href=\"https:\/\/www.artstation.com\/artwork\/RK1yeA\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"View Verses of Hope on ArtStation in a new tab\">\n          <img\n            src=\"https:\/\/cdnb.artstation.com\/p\/assets\/images\/images\/096\/877\/979\/large\/bruno-pavani-hope.webp?1772554587\"\n            alt=\"Verses of Hope game artwork\"\n            loading=\"lazy\"\n            decoding=\"async\">\n        <\/a>\n\n        <h3 class=\"pg-card-title\">\n          Verses of Hope \u2014 Narrative UI\/UX\n        <\/h3>\n\n        <p class=\"pg-text\">Poetry interaction concept<\/p>\n\n        <a\n          class=\"pg-link\"\n          href=\"https:\/\/www.artstation.com\/artwork\/RK1yeA\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\">\n          View project on ArtStation \u2197\n        <\/a>\n      <\/article>\n\n      <article class=\"pg-card\">\n        <a\n          class=\"pg-card-image\"\n          href=\"https:\/\/www.artstation.com\/artwork\/2BR9nK\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"View Bombastic Delivery-mingo on ArtStation in a new tab\">\n          <img\n            src=\"https:\/\/cdnb.artstation.com\/p\/assets\/images\/images\/096\/876\/567\/large\/bruno-pavani-bombastic1.jpg?1772551873\"\n            alt=\"Bombastic Delivery-mingo pixel art title screen\"\n            loading=\"lazy\"\n            decoding=\"async\">\n        <\/a>\n\n        <h3 class=\"pg-card-title\">\n          Bombastic Delivery-mingo \u2014 Game UI\/UX\n        <\/h3>\n\n        <p class=\"pg-text\">Pixel art HUD concept<\/p>\n\n        <a\n          class=\"pg-link\"\n          href=\"https:\/\/www.artstation.com\/artwork\/2BR9nK\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\">\n          View project on ArtStation \u2197\n        <\/a>\n      <\/article>\n\n      <article class=\"pg-card\">\n        <a\n          class=\"pg-card-image\"\n          href=\"https:\/\/www.artstation.com\/artwork\/L4qRa0\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          aria-label=\"View RPG Character Menu on ArtStation in a new tab\">\n          <img\n            src=\"https:\/\/cdna.artstation.com\/p\/assets\/images\/images\/096\/875\/332\/large\/bruno-pavani-menu.webp?1772549651\"\n            alt=\"Pixel art RPG character statistics and inventory interface\"\n            loading=\"lazy\"\n            decoding=\"async\">\n        <\/a>\n\n        <h3 class=\"pg-card-title\">\n          RPG Character Menu UI\/UX\n        <\/h3>\n\n        <p class=\"pg-text\">Pixel art interface concept<\/p>\n\n        <a\n          class=\"pg-link\"\n          href=\"https:\/\/www.artstation.com\/artwork\/L4qRa0\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\">\n          View project on ArtStation \u2197\n        <\/a>\n      <\/article>\n\n    <\/div>\n\n    <p class=\"pg-gallery-footer\">\n      <a\n        class=\"pg-link\"\n        href=\"https:\/\/www.artstation.com\/gamespavani\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\">\n        Explore the full ArtStation portfolio \u2197\n      <\/a>\n    <\/p>\n  <\/section>\n\n  <section\n    class=\"pg-section\"\n    id=\"pg-studio\"\n    aria-labelledby=\"pg-studio-title\">\n\n    <p class=\"pg-label\">Continue exploring<\/p>\n\n    <h2 class=\"pg-title\" id=\"pg-studio-title\">\n      More stories at Flying Frog.\n    <\/h2>\n\n    <p class=\"pg-text\">\n      Flying Frog Studios creates independent, story-driven games with\n      a focus on atmosphere and artistic direction. Visit the studio\n      for more about the games and their worlds.\n    <\/p>\n\n    <a\n      class=\"pg-link\"\n      href=\"https:\/\/flyingfrog.com.br\/\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\">\n      Visit Flying Frog Studios \u2197\n    <\/a>\n  <\/section>\n\n  <p class=\"pg-note\">\n    Game imagery: Flying Frog Studios. Interface studies: Bruno Pavani\n    on ArtStation. Project and studio credits remain with their\n    respective owners. External project links open in a new tab.\n  <\/p>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Beyond product design Games, art &amp; other worlds. I explore storytelling, atmosphere, and interaction through games and visual experiments. Here are selected projects from Flying Frog and interface studies from my ArtStation portfolio. Selected games \u2193 ArtStation gallery \u2193 Flying Frog \u2193 01 \/ Poetry, choice &amp; atmosphere Verses of Hope A missing line becomes [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-596","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/brunopavani.com\/index.php?rest_route=\/wp\/v2\/pages\/596","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brunopavani.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/brunopavani.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/brunopavani.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/brunopavani.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=596"}],"version-history":[{"count":4,"href":"https:\/\/brunopavani.com\/index.php?rest_route=\/wp\/v2\/pages\/596\/revisions"}],"predecessor-version":[{"id":608,"href":"https:\/\/brunopavani.com\/index.php?rest_route=\/wp\/v2\/pages\/596\/revisions\/608"}],"wp:attachment":[{"href":"https:\/\/brunopavani.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}