Aaron Martin logo
Aaron Martin
Powerapps

DeepMind Gemini Hero Page Clone

DeepMind Gemini Hero Page Clone
0 views
7 min read
#Powerapps
Table Of Content

Here you are. A DeepMing Gemini Hero Page clone on PowerApps.

It's a very clean landing page (Adapt for all screensizes) and you can also use as a SplashScreen. This is also supporting darkmode.

I always wanted to build some nice SVG animation and definedly this Gemini breathing animation is worth it.

This is how the power app looks like:

pixel perfect clone of Microsofot App Store on PowerApps

(notice I have added a dark/light mode Icon)

You can download and install the app right from my github Gemini Clone

Requirements

The Challenge to clone Gemini Hero Page and Menu require some basics on:

  • Adaptative layouts. Been confortable manipulating layouts is key and very powerfull while building an app. But it's a must if you really want to clone one.
  • SVG to Images. My main inspiration comes from Kristine Blog and her YouTube channel

Hands On

The idea was to build a nice Hero Page, but also to try this nice Menu header with two display levels.

small medium screen header for App store

I started with the Breathing Gemini animation and ended with the Menu display and search input.

  1. Radial Gradient Background
  2. Google Sans Family-font
  3. Gemini Gradient Animation
  4. Animation on PowerApps
  5. DeepMind Menu
  6. Header Menu Logo/Search/DarkMode

Radial Gradient Background

You can try it on CodePen or if you have a favorite tool, also try this code

<svg
  viewBox='0 5 10 10'
  xmlns='http://www.w3.org/2000/svg'
  xmlns:xlink='http://www.w3.org/1999/xlink'>
  <defs>
    <radialGradient id='myGradient' x1='80%' y1='20%' x2='5%' y2='5%'>>
      <stop offset='10%' stop-color='#02085e' stop-opacity='0.8' />
      <stop offset='95%' stop-color='#02085e' stop-opacity='0'/>
    </radialGradient>
  </defs>
  <rect width='100%' height='100%' fill='#000'/>
  <circle fill='url(#myGradient)' cx='5' cy='5' r='4'  />
  
</svg>
small medium screen header for App store

Google Sans family-font

PowerApps doesn't support Google Sans and nothing looks like it for the G. This G it's quite particular.

There might be better solution but I just transformed each word into SVG Image from Danmarshall github.

This will work like a charm

small medium screen header for App store

(To showcase here I added some black stroke but I don't use it on SVG)

Gemini Gradient Animation

This is the fun part. Here you can see how the animation looks on CodePen. I also added this one with a BlackBackground so it's easy to see.

I won't explain how to create an SVG animation but I'll explain the code in pieces. Remember you can check on Kristine YouTube Channel to learn in detail.

My strategy is to paint 3 SVG togheter and code a diferent gradient and animation on each one.

  • Paint 3 SVGs togheter:

You will find 3 paths inside a Group

<g>
<path fill='#fadbb9'  ....
<path fill='url(#gradient)' id='path' ....
<path fill='url(#gradient2)' id='path2' ...
</g>

Each path is the whole GEMINI SVG, but the first is simply painting it with the base color #fadbb9 . So we make sure atleast shows this base color, because the rest will breath in and out ontop.

On PowerApps we can use a variable instead of this harcoded colors. I create a separate Variable called xMyHeroColorsX, the I would use xMyHeroColorsX.Hex.Base and xMyHeroColorsX.Hex.Accent

The second path is again the whole SVG color, but this time we won't use a fix fill='' but fill='url(#gradient)' (for the lineargradient) and id="path" (for the animation)

  • Animation:

The animation is very simple. We will animate just 2 of the 3 paths. In a way that make it breath nicely.

<style>
    #path{ animation: fade 1.2s infinite alternate; }
    #path2{ animation: fade2 1.8s infinite alternate; }
    @keyframes fade {
      0%{ opacity: 1; }
      50%{ opacity: 0.8;}
      100%{ opacity: 0.3;}
    }
    @keyframes fade2 {
      0%{ opacity: 0;}
      100%{ opacity: 1;}
    }
</style>

You can try diferent values for the keyframes, perhaps you like it faster or longper loop, but definedly the infinite alternate for the animation is what give you the breathing feeling.

But the key is the opacity. We want to allow other paths to show. So while a path is on Opacity 0 or close to 0, another Path will take it's change to show.

  • LinearGradient:

This is the final touch. You want to paint each SVG diferntly for each animation. The first was fix with just color base but the other two are to have a gradient between the Baseand the Accent colors.

<defs>
    <linearGradient gradientTransform='rotate(240, 0.01, 0.2)' id='gradient' x='0%' y1='0%' x2='0%' y2='100%'>
      <stop offset='0%' style='stop-color: #fadbb9'></stop>
      <stop offset='100%' style='stop-color: #247cf7'></stop>
    </linearGradient>
    <linearGradient gradientTransform='rotate(40, 0.5, 0.1)' id='gradient2' x='0%' y1='0%' x2='0%' y2='100%'>
      <stop offset='0%' style='stop-color: #fadbb9'></stop>
      <stop offset='100%' style='stop-color: #247cf7'></stop>
    </linearGradient>
  </defs>

Rotate is the key to create the moving feeling while the previous animation opacity changed in and out.

You can easily try our diferent rotations or gradient configurations from here.

SVG on PowerApps

Moving all the data from CodePen is very simple. You just need to insert an Image and modify the image property with:

"data:image/svg+xml;utf8, " & EncodeUrl("")

Inside EncodeUrl("<svg>....</svg>") you can paste your SVG code. You just have to make sure your SVG have no doublequotes " ". If so, just replace it with single ones ' '.

If have doubts on this. Go check on Mathew Devaney's Blog how SVG transforms to Images on PowerApps

DeepMind Menu

This Menu behaves like an PowerApp Tab List with the exception of some Items displaying a sub Menu.

small medium screen header for App store

In order to achive this I have create the following Layout:

Screen
  <Main Menu>
  <Separator>
  <Sub Menu>

The Separator & SubMenu only show up in case a particular item at the Main Menu is selected.

The litle arrow up & line is just an SVG & a rectangle that calculates it's position based on the selection. Nothing too fancy.

There is a litle trick to hide blue like under the Main Menu. If the particular item has a submenu, the line has to disappear. So I hide it changing it's Parent Container size. It's not the best solution but works just fine.

Header Menu Logo/Search/DarkMode

  • The Logo it just another SVG from yesicon, which I manipulate to change based on DarkMode.
"data:image/svg+xml;utf8, " & EncodeUrl("<svg  xmlns='http://www.w3.org/2000/svg' width='60px' height='60px' viewBox='0 0 512 168'><path fill='"&If(varDarkMode,"white","#FF302F")&"' d='m496.052 102.672l14.204 9.469c-4.61 6.79-15.636 18.44-34.699 18.44c-23.672 0-41.301-18.315-41.301-41.614c0-24.793 17.816-41.613 39.308-41.613c21.616 0 32.206 17.193 35.633 26.475l1.869 4.735l-55.692 23.049c4.236 8.348 10.84 12.584 20.183 12.584c9.345 0 15.823-4.61 20.495-11.525M452.384 87.66l37.19-15.45c-2.056-5.17-8.16-8.845-15.45-8.845c-9.281 0-22.176 8.223-21.74 24.295'/><path fill='"&If(varDarkMode,"white","#20B15A")&"' d='M407.407 4.931h17.94v121.85h-17.94z'/><path fill='"&If(varDarkMode,"white","#3686F7")&"' d='M379.125 50.593h17.318V124.6c0 30.711-18.128 43.357-39.558 43.357c-20.183 0-32.33-13.58-36.878-24.606l15.885-6.604c2.865 6.79 9.78 14.827 20.993 14.827c13.767 0 22.24-8.535 22.24-24.482v-5.98h-.623c-4.112 4.983-11.961 9.468-21.928 9.468c-20.807 0-39.87-18.128-39.87-41.488c0-23.486 19.063-41.8 39.87-41.8c9.905 0 17.816 4.423 21.928 9.282h.623zm1.245 38.499c0-14.702-9.78-25.417-22.239-25.417c-12.584 0-23.174 10.715-23.174 25.417c0 14.514 10.59 25.042 23.174 25.042c12.46.063 22.24-10.528 22.24-25.042'/><path fill='"&If(varDarkMode,"white","#FF302F")&"' d='M218.216 88.78c0 23.984-18.688 41.613-41.613 41.613c-22.924 0-41.613-17.691-41.613-41.613c0-24.108 18.689-41.675 41.613-41.675c22.925 0 41.613 17.567 41.613 41.675m-18.19 0c0-14.95-10.84-25.23-23.423-25.23c-12.583 0-23.423 10.28-23.423 25.23c0 14.826 10.84 25.23 23.423 25.23c12.584 0 23.423-10.404 23.423-25.23'/><path fill='"&If(varDarkMode,"white","#FFBA40")&"' d='M309.105 88.967c0 23.984-18.689 41.613-41.613 41.613c-22.925 0-41.613-17.63-41.613-41.613c0-24.108 18.688-41.613 41.613-41.613c22.924 0 41.613 17.443 41.613 41.613m-18.253 0c0-14.95-10.839-25.23-23.423-25.23c-12.583 0-23.423 10.28-23.423 25.23c0 14.826 10.84 25.23 23.423 25.23c12.646 0 23.423-10.466 23.423-25.23'/><path fill='"&If(varDarkMode,"white","#3686F7")&"' d='M66.59 112.328c-26.102 0-46.534-21.056-46.534-47.158c0-26.101 20.432-47.157 46.534-47.157c14.079 0 24.357 5.544 31.957 12.646l12.522-12.521C100.479 7.984 86.338.258 66.59.258C30.833.259.744 29.414.744 65.17c0 35.758 30.089 64.912 65.846 64.912c19.312 0 33.889-6.354 45.289-18.19c11.711-11.712 15.324-28.158 15.324-41.489c0-4.174-.498-8.472-1.059-11.649H66.59v17.318h42.423c-1.246 10.84-4.672 18.253-9.718 23.298c-6.105 6.168-15.76 12.958-32.705 12.958'/></svg>")
  • The search icon toggles UpdateContext({varCTXSearchVisible:!varCTXSearchVisible}) then we hide or show a search bar based on varCTXSearchVisible
small medium screen header for App store
  • And finally the DarkMode. Google doens't have this button but I allwayus like enable my users to toogle based on Dark or Light colors. You can learn how I do it on DarkMode & Custom Theme

Conclusion

There you are, a fair clone of Google DeepMind.

A great Hero Page; with a fine two level menu, search funtion, darkmode and adapt to all sizes.

pixel perfect clone of Microsofot App Store on PowerApps

Next

Perhaps the most suitable place for an animated SVG would be the SplashScreen.

I would recommend to follow my data loader approach and place this kind of animations there.